javascript - jQuery ul li 切换菜单

Question

我的 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>

我的 toggle() jQuery 代码在这里:

<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 - 第一个没有关闭，所以我点击的第二个没有打开。

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

为什么我不能显示第二个子菜单并隐藏第一个，而我目前在第一个(不能同时工作)？

Answer 1

使用这个:

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