使用jquery的移动导航栏

Question

我正在尝试设计我的第一个网站，我已经构建了具有几个级别的菜单栏。一切正常。现在我想让它适合移动设备。

所以我想使用 jquery 在点击时打开关卡。我已经设法打开到第一级，但是当我点击第二级时，我似乎无法打开第三级......

代码如下：

jQuery(document).ready(function() {

      jQuery("#menu-trigger").click(function() {
        jQuery("ul#nav").slideToggle();
      });
      $(window).resize(function() {
        if ($(window).width() > 500) {
          $('ul#nav').removeAttr('style');
        }
      });
      $('ul#nav li').click(function() {
          if ($(window).width() <= 500) {
            $(this).find('ul').not('ul .submenu2').slideToggle();

          });

        $('ul#nav li ul .submenu').click(function() {
          $(this).find('ul .submenu2').slideToggle();
        });
      });

#menu-trigger {
  display: inline-block;
}
ul#nav li {
  float: none;
  border-bottom: solid 2px #d5dce4;
  position: relative;
}
ul#nav li:last-child {
  border-bottom: none;
}
ul#nav {
  display: none;
  position: absolute;
  top: 140px;
}
ul#nav a {
  width: 100%;
}
ul#nav ul.submenu {
  display: none;
  position: static;
}
ul#nav ul.submenu2 {
  display: none;
  position: static;
}
ul#nav li:hover .submenu {
  display: none;
}
ul#nav .submenu li:hover .submenu2 {
  display: none;
}

 <span id="menu-trigger"> menu </span>
<ul id="nav">
  <li><a href="index.html">home</a>
  </li>
  <li><a href="#">what is it?</a><span class="darrow">▼</span>
    <ul class="submenu">
      <li><a href="aboutthesystem.html">about</a>
      </li>
      <li><a href="systemobjective.html">objectives</a>
      </li>
      <li><a href="systemimplementation.html">implementation</a>
      </li>
    </ul>
  </li>
  <li><a href="#">5th grade</a><span class="darrow">▼</span>
    <ul class="submenu">
      <li><a href="#">geography</a><span class="larrow">&#9666;</span>
        <ul class="submenu2">
          <li><a href="5thgradegeographyworkpage.html">work page</a>
          </li>
          <li><a href="5thgradegeographyexplenation.html">explenation</a>
          </li>
          <li><a href="5thgradegeographyexemples.html">exemples</a>
          </li>
          <li><a href="5thgradegeographyreflections.html">reflections</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>

这是我第一次尝试网页设计，所以我很抱歉代码不好......

提前致谢！

Answer 1

你可以使用：

 $(this).children('.submenu').slideToggle();

这样你就没有等级限制了。每个子级别都有相同的类 .submenu .children([selector ]) 方法允许我们在 DOM 树中搜索这些元素的子元素

Answer 2

查看您的第三级代码submenu2 是ul 元素的类，因此请删除之间的空格

试试：

$('ul#nav li ul .submenu').click(function(){
    $(this).find('ul.submenu2').slideToggle();
    });
});

在此处查看小提琴：http://jsfiddle.net/sachinkk/nsujjoje/

jQuery(document).ready(function() {

jQuery("#menu-trigger").click(function(){
    jQuery("ul#nav").slideToggle();
});
$(window).resize(function(){
    if ($(window).width() > 500){
        $('ul#nav').removeAttr('style');
    }
});
$('ul#nav li').click(function(){
    if ($(window).width() <= 500){
    $(this).find('ul').not('ul .submenu2').slideToggle();
    }
});

$('ul#nav li ul .submenu').click(function(){
    $(this).find('ul.submenu2').slideToggle();
    });
});    

#menu-trigger{
    display:inline-block;
}
ul#nav li {

    float:none;
    border-bottom: solid 2px #d5dce4;
    position:relative;
}
ul#nav li :last-child{
    border-bottom:none;
}
ul#nav {
    display:none;
    position:absolute;
    top:140px;
}
ul#nav a {
width: 100%;
}
ul#nav ul.submenu {
    display:none;
    position: static;
}
ul#nav ul.submenu2 {
display: none;
position: static;
}
ul#nav li:hover .submenu {
display: none;
}

ul#nav .submenu li:hover .submenu2 {
display: none;
}

<span id="menu-trigger"> menu </span>
<ul id="nav">
<li><a href="index.html" >home</a></li>
<li><a href="#" >what is it?</a><span class="darrow">▼</span>
    <ul class="submenu">
        <li ><a href="aboutthesystem.html">about</a></li>
        <li><a href="systemobjective.html">objectives</a></li>
        <li><a href="systemimplementation.html">implementation</a></li>
    </ul>
</li>
<li ><a href="#" >5th grade</a><span class="darrow">▼</span>
    <ul class="submenu">
        <li><a href="#">geography</a><span class="larrow">&#9666;</span>
            <ul class="submenu2">
                <li ><a href="5thgradegeographyworkpage.html">work page</a></li>
                <li ><a href="5thgradegeographyexplenation.html">explenation</a></li>
                <li ><a href="5thgradegeographyexemples.html">exemples</a></li>
                <li ><a href="5thgradegeographyreflections.html">reflections</a></li>
            </ul>
        </li>
    </ul>
</li>

JS 仅在您的浏览器宽度小于 500 像素时执行 :)