javascript - Removing class from li -


i have searched answer cant seem quite find needs done here.

i have 3 li tags each drop down ul. want change background color on active li, remove if click on annother li or active li. far have managed add class active li removed clicking on annother li. need class removed if active li clicked again , closed well.

thanks.

    <style>      .add_color {background:#f3a54e;color:#fff !important;}     </style>      <body> <ul class="submenu">     <li>shop category                <ul>                 <li>some text</li>                 <li>some text</li>             </ul>         </li>         <li>shop brand             <ul>                <li>some text</li>                <li>some text</li>             </ul>         </li>         <li>diet specifics             <ul>               <li>some text</li>               <li>some text</li>            </ul>         </li> </ul>     </body>      <script>     // sub menu click fuction drop down menus      $(document).ready(function () {         $("li").click(function () {             //add , remove background color.            $("ul.submenu li").removeclass("add_color");            $(this).toggleclass("add_color");             //toggle child don't include them in hide selector using .not()             $('li > ul').not($(this).children("ul")             .slidetoggle(400)).slideup(400);          });     });     </script> 

the problem removing class li elements before calling toggleclass() means when toggleclass() executed class removed current element result in class getting added toggleclass instead of removing it.

$(document).ready(function() {    $(".submenu > li").click(function(e) {      //add , remove background color.      $("ul.submenu li.add_color").not(this).removeclass("add_color");      $(this).toggleclass("add_color");        //toggle child don't include them in hide selector using .not()      $('.submenu li > ul').not($(this).children("ul")        .slidetoggle(400)).slideup(400);      });  });
.add_color {    background: #f3a54e;    color: #fff !important;  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <ul class="submenu">    <li>shop category      <ul>        <li>some text</li>        <li>some text</li>      </ul>    </li>    <li>shop brand      <ul>        <li>some text</li>        <li>some text</li>      </ul>    </li>    <li>diet specifics      <ul>        <li>some text</li>        <li>some text</li>      </ul>    </li>  </ul>


Comments

Popular posts from this blog

node.js - Mongoose: Cast to ObjectId failed for value on newly created object after setting the value -

[C++][SFML 2.2] Strange Performance Issues - Moving Mouse Lowers CPU Usage -

ios - Possible to get UIButton sizeThatFits to work? -