I am working on a app using Jquery I want to add class and remove class conditionally. In code below there is menu and submenu.
If the user clicks #two
or #three
(to open submenu), the submenu class is added to the ul
tag containing #two
and #three
and the menu class is removed.
If the user clicks #three
or #four
(on li
tag), the menu class is added to the ul
tag containing #three
and #four
and the submenu class is removed from the ul
containing #one
and #two
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
if (!$(".left_pannel ul li ul").hasClass('submenu')) {
alert("test");
$(".left_pannel ul li").removeClass("iconadd");
} else {
$(".left_pannel ul li").addClass("iconadd");
}
});
</script>
<body>
<div class="left_pannel">
<ul>
<li><a href="#one" class="achore">Matches</a>
<ul id="one" class="submenu" style="display: none;">
<li><a href="https://www.google.com">Add Matches(m)</a></li>
<li><a href="https://www.google.com">Add Cricket(m)</a></li>
</ul>
</li>
<li><a href="#two" class="achore">Quize Master</a>
<ul id="two" class="submenu" style="display: none;">
<li><a href="">Add Matches(m)</a></li>
<li><a href="">Add Cricket(m)</a></li>
</ul>
</li>
<li id="#three"><a href="https://www.google.com">Excel Update</a></li>
<li id="#four"><a href="#">Application version</a></li>
</ul>
</div>
</body>