激活的toggleclass不能正常工作

Question

I want the menu to work like this. When you click Main1 it becomes active and the list will show, when you click it again the list will hide. When Main1 is active and you click Main2, then the Main1 should be inactive and Main2 active. But my Javascript doesn't seem to make it work well. It makes the Main1 inactive when you click Main2 and the other way, but if you click on any of the active Main it doesn't become incactive. Please help

    <div class="directory-section-list">
    <ul  class="list_item">
            <li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
              <ul>
            <li class=""><span class="li_lvl lvl1">1.5-4.5</span>
              <ul>
            <li><a href="/directory/autoloader/1-1-8-tons/fd-15/58-fd-15.html">FD 15</a></li>
            <li><a href="/directory/autoloader/1-1-8-tons/fd-18/59-fd-18.html">FD 18</a></li>
              </ul>
              </ul>

     <ul  class="list_item">
            <li class="li_lvl lvl0" id="bx_1847241719_2">Main2</li>
              <ul>
            <li class=""><span class="li_lvl lvl1">1.5-4.5</span>
              <ul>                          
           <li><a href="/directory/autoloader/1-1-8-tons/fd-15/58-fd-15.html">FD 15</a></li>
           <li><a href="/directory/autoloader/1-1-8-tons/fd-18/59-fd-18.html">FD 18</a></li>
          </ul>
              </ul >
             </div>

Javascript

$(' .list_item .lvl0').click(function(){
    $(".list_item.active").removeClass("active");
    $(this).parent().toggleClass('active');
});

$(' .list_item .lvl1').click(function(){
    $(this).parent().toggleClass('active');
});

Answer 1

Try this,

 $('.list_item .lvl0').click(function(){ $('.directory-section-list .active').removeClass('active'); if ($(this).parent().hasClass('active')) { $(this).parent().removeClass('active'); } else { $(this).parent().addClass('active'); } }); $('.list_item .lvl1').click(function(){ $(this).parent().toggleClass('active'); }); 

Answer 2

Please try this

HTML

<div class="directory-section-list">
    <ul class="list_item">
        <li class="li_lvl lvl0" id="bx_1847241719_2">Main1</li>
        <ul>
            <li class=""><span class="li_lvl lvl1">1.5-4.5</span>
                <ul>
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-15/58-fd-15.html">FD 15</a></li>
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-18/59-fd-18.html">FD 18</a></li>
                </ul>
        </ul>
    </ul>
    <ul class="list_item">
        <li class="li_lvl lvl1" id="bx_1847241719_2">Main2</li>
        <ul>
            <li class=""><span class="li_lvl lvl1">1.5-4.5</span>
                <ul>
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-15/58-fd-15.html">FD 15</a></li>
                    <li><a href="/directory/autoloader/1-1-8-tons/fd-18/59-fd-18.html">FD 18</a></li>
                </ul>
        </ul>
    </ul>
</div>

Java Script

$(' .list_item .lvl0').click(function () {
   $(' .list_item .lvl1').parent().removeClass("active");
   $(this).parent().toggleClass('active');
});

$(' .list_item .lvl1').click(function () {
   $(' .list_item .lvl0').parent().removeClass("active");
   $(this).parent().toggleClass('active');
});

Answer 3

I think you want something like this?

 $(document).ready(function(){ $('.maindiv').hide(); $( "button" ).click(function() { $('.maindiv[data-link=' + $(this).data('link') + ']').toggle("fade",300); }); }); 

 div { background-color: green; color: white; width: 200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <button class="show" data-link="main1">Main1</button> <button class="show" data-link="main2">Main2</button> <div> <div class="maindiv" data-link="main1"> <h1>This is main1</h1> </div> <div class="maindiv" data-link="main2"> <h1>This is main2</h1> </div> </div> 

Answer 4

Sorry but your HTML List had a couple of errors the

<li class=""><span class="li_lvl lvl1">1.5-4.5</span>

will never be closed...

its all about the HTML Structure - i've done another change -> check the HTML Structure of this JS Fiddle: http://jsfiddle.net/marco_rensch/hzu76hgt/32/

Answer 5

Well Thank you all for your help. I managed to do it taking some of your examples and making it work my own way. Thank you again. I will post the Javascript fix.

$(document).ready(function() {
          $('.li_lvl').click(function () {

            if ($(this).parent().hasClass('active')) {
                $(this).parent().removeClass('active');
            }
            else {
               $('.directory-section-list .active').removeClass('active');
                $(this).parent().addClass('active');
            }
        });

This will toggle class active of the parent .li_lvl which is the ul.list_item. If parent has class active it will remove class active. If any other list_item will have class active whilst you click on the other list_item, it will remove class active on the other list_item and make class active on the list_item you clicked.