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

查看您的第三级代码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仅在您的浏览器宽度小于500px时执行，根据您的登录信息:)

Answer 2

您可以使用：

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

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

使用jquery的移动导航栏

2 个答案: