I am currently working on building a sidebar using HTML, CSS, and jQuery. One issue I am facing is with the slideUp/slideDown functionality not working correctly. Specifically, whenever I try to click on a submenu to close it, both open submenus disappear. Additionally, clicking on the submenus to open them is also not functioning as expected. I am puzzled about why this is happening and what mistake I might have made.
After attempting
console.log($(this).find('> .submenu'));$(document).ready(function() {
$('.has-submenu').click(function() {
$(this).toggleClass('active');
$(this).find('> .menu-item > .arrow').toggleClass('rotated');
if ($(this).hasClass('active')) {
$(this).find('> .submenu').slideDown("slow");
} else {
console.log($(this).find('> .submenu'));
$(this).find('> .submenu').slideUp("slow");
}
});
});@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,300,600);
@font-face {
font-family: "ionicons";
src: url("https://code.ionicframework.com/ionicons/2.0.1/fonts/ionicons.eot?v=2.0.1");
// more CSS properties...
}
// more CSS code...
</script>
<div class="sidebar">
<nav>
<ul class="menu">
<li class="has-submenu">
<div class="menu-item">
<span>Analytic plane geometry</span>
<span class="arrow"></span>
</div>
<ul class="submenu">
<li class="has-submenu">
<div class="menu-item">
<span>Line</span>
<span class="arrow"></span>
</div>
<ul class="submenu">
<li>1</li>
<li>2</li>
</ul>
</li>
<li class="has-submenu">
<div class="menu-item">
<span>Circle</span>
<span class="arrow"></span>
</div>
<ul class="submenu">
<li>1</li>
<li>2</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>If you want to view the demo, here is the link.