I recently worked on a project creating a menu with submenus for a custom parallax website. When clicking on a parent menu item, the submenus remain displayed as intended. However, I now need to hide the submenus when other parent menu items are clicked. Since I am new to jQuery, I would appreciate some assistance. Below is a snippet of my code...
HTML
<ul class="navigation">
<li data-slide="2">estate
<ul class="navigation2">
<li data-slide="2">land</li>
<li data-slide="3">varietal</li>
<li data-slide="4">people</li>
<li data-slide="6">practices</li>
<li data-slide="9">future offerings</li>
</ul>
</li>
<li data-slide="10">about</li>
<li data-slide="13">location</li>
<li data-slide="14">contact</li>
</ul>
CSS
.navigation {
position:fixed;
text-align:center;
}
.navigation li {
display:block;
}
.navigation li:hover, .active {
cursor:pointer;
text-decoration:underline;
}
.navigation2 {
position:fixed;
text-align:right;
left:50%;
}
.navigation2 li {
color:#000;
}
.navigation2 li:hover, .active {
cursor:pointer;
text-decoration:underline;
}
JQUERY
$('.navigation2').hide();
$('.navigation').children().click(function () {
$(this).siblings().find('.navigation2').slideUp(1000);
$(this).children('.navigation2').slideToggle(1000);
}).children('.navigation2').click(function (event) {
event.stopPropagation();
});