带有子菜单触发器的jQuery菜单 [英] jQuery menu with sub menu trigger

问题描述

我正在尝试为HTML菜单创建触发器，单击该触发器将切换子菜单.以下代码的问题是，当您单击触发器(class ="open")时，它将立即切换所有子菜单项.我希望触发器使用jQuery一次切换一个子菜单.这是我的代码:

I am trying to create a trigger for an HTML menu which when clicked will toggle sub menus. The problem with the following code is when you click the trigger (class="open") it toggles all the submenu items at once. I'd like the trigger to toggle one sub menu at a time using jQuery. Here is my code:

HTML

<ul>
 <li class="menu-item-has-children">Item 1</li>
   <a class="open">+</a>
   <ul class="sub-menu">
     <li>Sub Item 1</li>
     <li>Sub Item 2</li>
     <li class="menu-item-has-children">Sub Item 3</li>
     <a class="open">+</a>
       <ul class="sub-menu">
         <li>Sub Sub Item 1</li>
         <li>Sub Sub Item 2</li>
         <li>Sub Sub Item 3</li>
         <li>Sub Sub Item 4</li>
         <li>Sub Sub Item 5</li>
      </ul>
   <li>Sub Item 4</li>
   <li>Sub Item 5</li>
</ul>

JQUERY

$(document).ready(function() {
  $('.open').click(function () {
    $('li.menu-item-has-children').parent().closest('.sub-menu').toggle();
  });
});

CSS

ul li {
  list-style-type:none;
}
.open {
  width:20px;
  height:20px;
  background-color:red;
  color:#fff;
  display:block;
  cursor:pointer;
  text-align:center;
 }
 .sub-menu {
  display:none;
 }

在此处查看JS地

谢谢:)

推荐答案

此处没有上下文this.应该是:

There's no contextual this here. It should be:

$(document).ready(function() {
  $('.open').click(function () {
    $(this).next('.sub-menu').toggle();
  });
});

使用$('li.menu-item-has-children')时，它实际上选择所有内容，而不是单击的内容.触发click事件的当前元素可以通过this关键字获取，而我在上面已使用它来使其正常工作.由于您具有完美的结构，例如<a>后面的子菜单，因此上面的代码可与.next()一起使用.

When you are using the $('li.menu-item-has-children'), it selects literally everything and not the one that's clicked upon. The current element that fired the click event can be got through the this keyword and I have used it above to make it work. Since you have a perfect structure like the submenu follows the <a>, the above code works with .next().

代码段

$(document).ready(function() {
  $('.open').click(function () {
    $(this).next('.sub-menu').toggle();
  });
});

ul li {
 list-style-type:none;
}
.open {
  width:20px;
  height:20px;
  background-color:red;
  color:#fff;
  display:block;
  cursor:pointer;
  text-align:center;
}
.sub-menu {
  display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li class="menu-item-has-children">Item 1</li>
  <a class="open">+</a>
  <ul class="sub-menu">
    <li>Sub Item 1</li>
    <li>Sub Item 2</li>
    <li class="menu-item-has-children">Sub Item 3</li>
    <a class="open">+</a>
    <ul class="sub-menu">
      <li>Sub Sub Item 1</li>
      <li>Sub Sub Item 2</li>
      <li>Sub Sub Item 3</li>
      <li>Sub Sub Item 4</li>
      <li>Sub Sub Item 5</li>
    </ul>
    <li>Sub Item 4</li>
    <li>Sub Item 5</li>
  </ul>
</ul>

JSFiddle: https://jsfiddle.net/bdh7seoh/

JSFiddle: https://jsfiddle.net/bdh7seoh/

这篇关于带有子菜单触发器的jQuery菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！