I'm facing an issue with my code where my drop-down menu hides whenever I click on nested elements of "element2" in the menu. I only want it to hide when clicking directly on "element2," not its subelements. Here is the desired effect I am looking for:
$(".sidebar-nav>li").has("ul").click(
function(e){
$(this).toggleClass("toggled");
$(this).children("ul").toggleClass("toggled");
}
);/* line 14, ../sass/style.scss */
body {
-webkit-font-smoothing: antialiased;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
background-color: #FFF;
margin: 0;
padding: 0;
}
/* more CSS styles here... */ <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<head>
<body>
<div id="wrapper">
<div id="sidebar-wrapper">
<ul class="sidebar-nav">
<li class="sidebar-brand">
Logo
</li>
<li>
Element1
</li>
<li>
Element2
<ul>
<li>
<a href="#">Sublement1</a>
</li>
<li>
<a href="#">Subelement2</a>
</li>
</ul>
</li>
<li>
Element 3
</li>
<li>
Element4
</li>
</ul>
</div>
<div id="page-content-wrapper">
</div>
</div>
</body>