jQuery ul li切换菜单

时间:2016-03-08 22:57:32

标签: javascript jquery html css

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

但是,如果我在一个类别示例1(已激活或已点击)并选择单击另一个示例2 - 第一个没有关闭,所以我点击的另一个没有打开。

为什么隐藏节目不起作用?

为什么我无法显示第二个sub-menu并在我当前第一个时隐藏第一个(不是双向工作)?

2 个答案:

答案 0 :(得分:2)

使用此:

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

答案 1 :(得分:1)

<强> Working fiddle

您可以使用toggleClass()函数,在将active类添加到点击的项目之前,您应该使用以下类别dijete将其从其他项中删除:

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

希望这有帮助。

工作代码段

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

  $('ul.dijete').removeClass('active');
  $(this).find('ul.dijete').toggleClass('active');
});
&#13;
.active{
  background-color: green;
}
&#13;
<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>
&#13;
&#13;
&#13;