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

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 添加 submenu-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

您正在切换所有子项目的 class。您应该做的是从单击的句柄遍历以获取相应的子项。这样的东西就足够了：

$(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

删除 class 中的数字，因此所有子菜单都具有相同的 class。然后使用 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>

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

How to open correct sublist in dropdown menu

javascript

jquery

html-lists