在响应式 JQuery/CSS 菜单中显示子项

Question

如果我重复了一个问题，对不起……我保证我已经到处寻找答案了。

我想在响应式菜单中添加一个子菜单。我正在努力找到一种以响应方式显示子项和主项的方法。

这是我的代码片段……CSS还有点粗糙，我会尽快解决这个问题，只需使用一个slideTooggle（）即可显示所有菜单项。

我应该提到我正在Joomla上工作……但我已经检查过我的模块配置和模板，我很确定问题不在那里。但也许你有什么建议？

好的，这是我的代码片段。感谢您的帮助！：）

$(function() {
   var pull   = $('#pull');
    menu   = $('nav ul');
    menuHeight = menu.height();

   $(pull).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
               
   });

   $(window).resize(function(){
          var w = $(window).width();
          if(w > 320 && menu.is(':hidden')) {
           menu.removeAttr('style');
          }
      });
  });

<nav id="menu" class="clearfix">
  <ul class="clearfix">
    <li><a class="current first-item" href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li><a href="#">Item3</a></li>
    <ul>
      <li><a href="#">Subitem 3.1</a></li>
      <li><a href="#">Subitem 3.2</a></li>
      <li><a href="#">Subitem 3.3</a></li>
    </ul>
    <li><a href="#">Item4</a></li>
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>

这是我目前针对小屏幕的CSS：

nav { height: auto ; right: 15px; top: 0px; letter-spacing: 0;margin:0;position: relative;z-index: 10; margin: 0 4px 0 30px;}
 nav ul { width: 100%; display: block; height: auto;}
 nav li{ width: 50%; float: left; position: relative; z-index:10;}
 nav ul li a {display: block; padding: 25px 20px;color: #8c1b23; text-decoration: none;}
 nav li a { border-bottom: 1px solid #cccccc;}
 nav a { text-align: left; width: 100%; text-indent: 15px; }
 nav ul  { display: none; height: auto; }
 nav a#pull { display: block; background-color: #8c1b23; width: 100%; position: relative;}
 nav a#pull:after { content: ""; background: url(../images/nav-icon.png) no-repeat; width: 20px; height: 20px; display: inline-block; position: absolute; right:0;}
 
 #nav a {background: #8c1b23; color: #000; display: inline-block; font-family: 'Lato', sans-serif; font-size: 11px; line-height: 35px; padding: 0 10px; text-decoration: none; }
 #nav ul {margin-left: 0px; padding:0; float:left; height:24px; list-style: none}
 #nav ul li {list-style:none;float:left;position:relative; padding-right:0px 20px; margin:0; margin-right:5px;}
 #nav ul li a {color: #2d2a2a;display: block;font-family:  'Lato', sans-serif;font-size: 10px;font-weight: normal;padding: 0;text-align: left;border-right:none;}
 #nav ul li a:hover { color:#2d2a2a; background:none; text-decoration:none;}
 #nav ul li:hover:after { display: block; width: 0; height: 0; position: absolute; left: 50%; bottom: 0; margin-left: -10px; }
 #nav ul li.active > a { background: #2d2a2a; color: #ebebeb; }
 #nav ul li:hover > a { background: #ececec;  }
 #nav ul li ul {position:absolute; width:180px; left:-999em; border-top:0; margin:0; padding:0; }
 #nav ul li ul:hover  {position:absolute; width:180px; left:-999em;border-top:0; margin:0; padding:0; }
 #nav ul li:hover ul {left:0;}
 #nav ul ul ul{display:none;}
 #nav ul li ul li:hover ul {left:100%; top:0; display: block;}
 #nav ul li:hover ul {left:100%; top:0; display:none;}
 #nav ul li:hover ul li a { border:none;}
 #nav ul li:hover ul li ul li a { display:none;}
 #nav ul li ul li:hover ul li a { display:block;}

- Karla Alcantar

---

如果您能提供CSS，或者您正在使用一些外部库，那么这可能会有所帮助。 - Bazinga

我添加了我的CSS（它非常凌乱，我知道）。 - Karla Alcantar

Answer 1

我认为这可能是您想要实现的：

HTML：

<nav id="menu" class="clearfix">
  <ul class="clearfix" style="display:none">
    <li><a class="current first-item" href="#">Item1</a></li>
    <li><a href="#">Item2</a></li>
    <li><a href="#">Item3</a>
        <ul class="submenu" style="display:none">
          <li><a href="#">Subitem 3.1</a></li>
          <li><a href="#">Subitem 3.2</a></li>
          <li><a href="#">Subitem 3.3</a></li>
        </ul>
    </li>
    <li><a href="#">Item4</a>
        <ul class="submenu" style="display:none">
          <li><a href="#">Subitem 4.1</a></li>
          <li><a href="#">Subitem 4.2</a></li>
          <li><a href="#">Subitem 4.3</a></li>
        </ul>
    </li>
  </ul>
  <a href="#" id="pull">Menu</a>
</nav>

JS：

$(function() {
        var pull        = $('#pull');
        menu        = $('nav > ul');
        menuHeight  = menu.height();

        $(pull).on('click', function(e) {
            e.preventDefault();
            menu.slideToggle();

        });

        // What I added
        $('#menu > ul > li').on('click', function(e) {
            $(this).find('.submenu').slideToggle();
        });

        // $(window).resize(function(){
        //     var w = $(window).width();
        //     if(w > 320 && menu.is(':hidden')) {
        //         menu.removeAttr('style');
        //     }
        // });
    });

另外，关于你的CSS，我认为你有一个误解，这可能会导致一些奇怪的事情发生。例如，nav ul和nav > ul之间存在巨大的区别。

nav ul表示在nav元素下的所有ul元素都遵循定义的规则。换句话说，即使ul元素不是nav元素的直接子元素，也会应用所定义的CSS。

另一方面，nav > ul表示只有nav元素的直接子元素中的ul元素会受到影响。因此，如果你在li中有一个ul，它将不会受到影响。

希望这样讲清楚了，如果菜单按照你的要求工作，请告诉我。谢谢 :)

此外，这是jsfiddle链接：http://jsfiddle.net/u1zpoaj7/1/

- Bazinga