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
Post a Comment