Currently, I am working on a menu/submenu system where I want to toggle active classes when clicked. However, I encountered an issue - if the same menu item is clicked twice, I need to remove the active class. Initially, I tried using jQuery's toggleClass method but it didn't work as expected. Any suggestions or ideas on how to achieve this functionality? Thank you!
$(document).ready(function() {
$("#menusomething li a").on("click", function() {
$("#menusomething li a").removeClass("active");
$(this).toggleClass("active");
});
});#menusomething li a{color :green}
#menusomething li a.active{color :red}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menusomething" style="padding-left:30px">
<li><a href="#">HOME</a></li>
<li><a href="#">ABOUT</a></li>
<li><a class="target" href="#">CHAPTERS</a>
<ul class="submenu">
<li><a href="#">Dallas</a></li>
<li><a href="#">Los Angeles</a></li>
<li><a href="#">New York</a></li>
<li><a href="#">Northern California</a></li>
<li><a href="#">Orange County</a></li>
<li><a href="#">Phoenix</a></li>
<li><a href="#">San Diego</a></li>
<li><a href="#">Washington DC</a></li>
</ul></li>
<li><a href="#">MEMBER SERVICES</a>
<ul class="submenu">
<li><a href="#">Service</a></li>
<li><a href="#">Service2</a></li>
<li><a href="#">Service3</a></li>
<li><a href="#">Service4</a></li>
</ul></li>
<li><a href="#">MENU ITEM</a></li>
<li><a href="#">MENU ITEM 2</a></li>
<li><a href="#">CONTACT</a></li>
</ul>