Question

我遇到了一个小Javascript菜单问题。

我有一个看起来像这样的ul列表。

<ul class="mainmenu">
  <li class="sub-handle">
    Item 1
    <ul class="submenu">
      <li class="sub-li">item 1-1</li>
      <li class="sub-li">item 1-2</li>
      <li class="sub-li">item 1-1</li>
    </ul>
  </li>
  <li class="sub-handle">
    Item 2
    <ul class="submenu">
      <li class="sub-li">item 2-1</li>
      <li class="sub-li">item 2-2</li>
      <li class="sub-li">item 2-1</li>
    </ul>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

我有php添加子菜单-i ++，并且工作得很好。现在我有一个Javascript下拉函数，看起来像这样。

var sub_handle = $('.sub-handle');
var sub_nav_ul = $('nav .submenu');
var sub_nav_ul_li = $('nav .mainmenu .sub-li');
$(sub_handle).on('click', function(){
    sub_nav_ul.toggleClass('showing-sub');
    sub_nav_ul_li.toggleClass('smooth-anchor');
});
    sub_nav_ul_li.on('click', function(){
    sub_nav_ul.toggleClass('showing-sub');
});

问题在于，当我按下任何子菜单时，我的所有子菜单都会打开。我希望Javascript以某种方式像php一样计算，看看是否只按下了一个扩展的submenu-i ++。

我希望这很清楚，否则请大声喊叫，我会尝试进一步解释。

提前致谢！

Answer 1

<ul class="mainmenu">
  <li class="sub-handle sub-handle-1">
    Item 1
    <ul class="submenu">
      <li class="sub-li">item 1-1</li>
      <li class="sub-li">item 1-2</li>
      <li class="sub-li">item 1-1</li>
    </ul>
  </li>
  <li class="sub-handle sub-handle-2">
    Item 2
    <ul class="submenu">
      <li class="sub-li">item 2-1</li>
      <li class="sub-li">item 2-2</li>
      <li class="sub-li">item 2-1</li>
    </ul>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

var sub_handle = $('.sub-handle');
var sub_nav_ul = $('nav .submenu');
var sub_nav_ul_li = $('.submenu .sub-li');
sub_handle.on('click', function(){
    sub_handle.removeClass("showing-sub");
    $(this).addClass('showing-sub');
    sub_nav_ul_li.toggleClass('smooth-anchor');
});
sub_nav_ul_li.on('click', function(){
    $(this).parent().removeClass('showing-sub');
});

将something like this工作：

注意：我必须编辑一些HTML。

Answer 2

您正在所有子项目上切换课程。你应该做的是从被点击的句柄遍历以获得相应的子项。这样的东西就足够了：

$(sub_handle).on('click', function(){
    $(this).find(sub_nav_ul).toggleClass('showing-sub');
    $(this).find(sub_nav_ul_li).toggleClass('smooth-anchor');
});
    sub_nav_ul_li.on('click', function(){
    $(this).closest(sub_nav_ul).toggleClass('showing-sub');
});

这绝不是解决这个问题的最佳方案，但它应该会有所帮助。

Answer 3

删除类中的数字，因此所有子菜单都具有相同的类。然后使用DOM导航方法查找要切换的相应菜单项。

var sub_handle = $('.sub-handle');
var sub_nav_ul_li = $('nav .mainmenu .sub-li');
sub_handle.on('click', function() {
  $(this).find(".submenu").toggleClass('showing-sub');
  $(this).find(".sub-li").toggleClass("smooth-anchor");
});
sub_nav_ul_li.on('click', function() {
  $(this).parent().toggleClass('showing-sub');
});

.submenu {
  display: none;
}
.submenu.showing-sub {
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="mainmenu">
  <li class="sub-handle">
    Item 1
    <ul class="submenu">
      <li class="sub-li">item 1-1</li>
      <li class="sub-li">item 1-2</li>
      <li class="sub-li">item 1-1</li>
    </ul>
  </li>
  <li class="sub-handle">
    Item 2
    <ul class="submenu">
      <li class="sub-li">item 2-1</li>
      <li class="sub-li">item 2-2</li>
      <li class="sub-li">item 2-1</li>
    </ul>
  </li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>

如何在下拉菜单中打开正确的子列表

3 个答案: