jQuery ul li toggle 菜单

Question

我这里有HTML代码：

我这里有HTML代码：

<ul class="main-block">

 <li class="firstLevel">
   <a href="#category">EXAMPLE CATEGORY 1</a>
     <ul class="dijete">
       <li class="child">
          <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 11.</a>
       </li>
       <li class="child">
          <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 1.1</a>
       </li>
     </ul>
 </li>

 <li class="firstLevel">
   <a href="#category">EXAMPLE CATEGORY 2</a>
     <ul class="dijete">
       <li class="child">
          <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 2.1</a>
       </li>
       <li class="child">
          <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 2.2</a>
       </li>
     </ul>
 </li>

</ul>

我用jQuery实现的toggle()代码如下：

<script type="text/javascript">
    var $j = jQuery.noConflict();
    $j(function() {
        $j('li.firstLevel').click(function(){
            if($j('ul.dijete').hasClass('active')){
                $j(this).find('ul.dijete').removeClass('active');
            }else{
                $j(this).find('ul.dijete').addClass('active');
            }
        });
    });
</script>

但是当我在一个类别 EXAMPLE 1 上（已经激活或点击），并选择点击另一个 EXAMPLE 2 时，第一个类别不会关闭，所以我点击的其他第二个类别也不会打开。

为什么隐藏和显示不起作用？

为什么我不能同时显示第二个子菜单并隐藏第一个子菜单，而我当前正在第一个子菜单上（两者都不起作用）？

- Ho Thanh Cyberdelia Nhan

---

实际上我是在添加CSS类，而不是使用jQuery的toggle();？ 该类具有CSS样式display：block（默认为none） 或者我应该使用hide() show()来显示子ul内容？ - Ho Thanh Cyberdelia Nhan

尝试使用jQuery的toggle函数。 - Keith Anderson

可能是重复的问题：jQuery toggleClass if else not working。 - Brian Tompsett - 汤莱恩

Answer 1

请使用以下内容：

var $j = jQuery.noConflict();
$j(function() {
    $j('li.firstLevel').click(function(){
        $j(this).children('ul.dijete').toggleClass('active');
    });
});

- peppinoibra

Answer 2

可运行的范例

你可以使用 toggleClass() 函数，在添加 active 类到点击的元素之前，使用以下方式从其他带有 dijete 类的元素中删除它：

$('ul.dijete').removeClass('active');

希望这可以帮到您。

---

可运行的代码片段

$('li.firstLevel').click(function(e){
  e.preventDefault();

  $('ul.dijete').removeClass('active');
  $(this).find('ul.dijete').toggleClass('active');
});

.active{
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-block">

  <li class="firstLevel">
    <a href="#category">EXAMPLE CATEGORY 1</a>
    <ul class="dijete">
      <li class="child">
        <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 11.</a>
      </li>
      <li class="child">
        <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 1.1</a>
      </li>
    </ul>
  </li>

  <li class="firstLevel">
    <a href="#category">EXAMPLE CATEGORY 2</a>
    <ul class="dijete">
      <li class="child">
        <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 2.1</a>
      </li>
      <li class="child">
        <a href="some-sub-category.html">EXAMPLE SUB-CATEGORY 2.2</a>
      </li>
    </ul>
  </li>

</ul>

- Zakaria Acharki