admin管理员组

文章数量:1026989

I have my HTML code here :

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

My jQuery code for toggle() is here:

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

But when I am on one category EXAMPLE 1 (active or clicked already) and chose to click on another EXAMPLE 2 - the first one does not close, so as the other second that I clicked doesn not open.

Why is that hide-show doesn't work?

Why I can not show second sub-menu and hide first one while I am currently on first (not working in both ways)?

I have my HTML code here :

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

My jQuery code for toggle() is here:

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

But when I am on one category EXAMPLE 1 (active or clicked already) and chose to click on another EXAMPLE 2 - the first one does not close, so as the other second that I clicked doesn not open.

Why is that hide-show doesn't work?

Why I can not show second sub-menu and hide first one while I am currently on first (not working in both ways)?

  • javascript
  • jquery
  • html
  • css
Share Improve this question edited Mar 8, 2016 at 23:16 Zakaria Acharki 67.5k15 gold badges78 silver badges106 bronze badges asked Mar 8, 2016 at 22:57 Ho Thanh Cyberdelia NhanHo Thanh Cyberdelia Nhan 4465 silver badges21 bronze badges 3
  • Actually I am adding a CSS class, instad using jQuery toggle();? Class has CSS style display:block (default none) OR should I use hide() show() for displaying child ul content? – Ho Thanh Cyberdelia Nhan Commented Mar 8, 2016 at 23:00
  • 1 try using jquery's toggle function. – Keith Anderson Commented Mar 8, 2016 at 23:06
  • Possible duplicate of jQuery toggleClass if else not working – Brian Tompsett - 汤莱恩 Commented May 8, 2016 at 8:52
Add a ment  | 

2 Answers 2

Reset to default 3

Use this:

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

Working fiddle

You could use toggleClass() function instead and before adding active class to the clicked item you should remove it from other items with class dijete using :

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

Hope this helps.

Working snippet

$('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./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>

I have my HTML code here :

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

My jQuery code for toggle() is here:

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

But when I am on one category EXAMPLE 1 (active or clicked already) and chose to click on another EXAMPLE 2 - the first one does not close, so as the other second that I clicked doesn not open.

Why is that hide-show doesn't work?

Why I can not show second sub-menu and hide first one while I am currently on first (not working in both ways)?

I have my HTML code here :

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

My jQuery code for toggle() is here:

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

But when I am on one category EXAMPLE 1 (active or clicked already) and chose to click on another EXAMPLE 2 - the first one does not close, so as the other second that I clicked doesn not open.

Why is that hide-show doesn't work?

Why I can not show second sub-menu and hide first one while I am currently on first (not working in both ways)?

  • javascript
  • jquery
  • html
  • css
Share Improve this question edited Mar 8, 2016 at 23:16 Zakaria Acharki 67.5k15 gold badges78 silver badges106 bronze badges asked Mar 8, 2016 at 22:57 Ho Thanh Cyberdelia NhanHo Thanh Cyberdelia Nhan 4465 silver badges21 bronze badges 3
  • Actually I am adding a CSS class, instad using jQuery toggle();? Class has CSS style display:block (default none) OR should I use hide() show() for displaying child ul content? – Ho Thanh Cyberdelia Nhan Commented Mar 8, 2016 at 23:00
  • 1 try using jquery's toggle function. – Keith Anderson Commented Mar 8, 2016 at 23:06
  • Possible duplicate of jQuery toggleClass if else not working – Brian Tompsett - 汤莱恩 Commented May 8, 2016 at 8:52
Add a ment  | 

2 Answers 2

Reset to default 3

Use this:

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

Working fiddle

You could use toggleClass() function instead and before adding active class to the clicked item you should remove it from other items with class dijete using :

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

Hope this helps.

Working snippet

$('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./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>

本文标签： javascriptjQuery ul li toggle menuStack Overflow

版权声明：本文标题：javascript - jQuery ul li toggle menu - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745655176a2161555.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。