Question

我正在尝试为HTML菜单创建一个触发器，单击此按钮将切换子菜单。以下代码的问题是当您单击触发器（class =“open”）时，它会立即切换所有子菜单项。我想使用jQuery一次切换一个子菜单的触发器。这是我的代码：

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;
 }

VIEW THE JS FIDDLE HERE

谢谢：）

Answer 1

这里没有上下文this。它应该是：

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

当您使用$('li.menu-item-has-children')时，它会选择字面上的所有内容而不是单击的内容。触发click事件的当前元素可以通过this关键字获得，我已经使用它来使其工作。由于您具有完整的结构，例如<a>后的子菜单，因此上述代码适用于.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/

Answer 2

其他选项是为您的sub-menu创建另一个类。

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

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

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.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-sub1">+</a>
        <ul class="sub-menu1">
          <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>

带有子菜单触发器的jQuery菜单

2 个答案: