How can I show my submenu and hide when I click on the main item?
$('.slideout-menu li').click(
function() {
$(this).children('.mobile-sub-menu').show();
},
function() {
$(this).children('.mobile-sub-menu').hide();
});
.slideout-menu {
position: absolute;
top: 100px;
left: 0px;
width: 100%;
height: 100%;
background: rgb(248, 248, 248);
z-index: 1;
}
.slideout-menu .slideout-menu-toggle {
position: absolute;
top: 12px;
right: 10px;
display: inline-block;
padding: 6px 9px 5px;
font-family: Arial, sans-serif;
font-weight: bold;
line-height: 1;
background: #222;
color: #999;
text-decoration: none;
vertical-align: top;
}
.slideout-menu .slideout-menu-toggle:hover {
color: #fff;
}
.slideout-menu ul {
list-style: none;
font-weight: 300;
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
}
.slideout-menu ul li {
/*border-top: 1px solid #dddddd;*/
border-bottom: 1px solid #dddddd;
}
.slideout-menu ul li a {
position: relative;
display: block;
padding: 10px;
color: #999;
text-decoration: none;
}
.slideout-menu ul li a:hover {
background: #aaaaaa;
color: #fff;
}
.slideout-menu ul li a i {
position: absolute;
top: 15px;
right: 10px;
opacity: .5;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slideout-menu">
<ul>
<li><a href="#">MANUALS</a>
<ul class="mobile-sub-menu">
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
<li><a href="#">1</a></li>
</ul>
</li>
<li><a href="#">NEWS</a></li>
<li><a href="#">SPARE PART</a></li>
<li><a href="#">Photo Gallery</a></li>
<li><a href="#">WHERE TO BUY</a></li>
<li><a href="#">SUPPORT</a></li>
<li><a href="#">EDIT BOOK</a></li>
</ul>
</div>
I'll add some sub-clause to the main MANUALS section. What can I do to hide and show its submenu when I click on its main item?
I am trying to write some jQuery code, but it is possible to hide the element right now, but cannot let it show it again. Is there something wrong with my jQuery code?
+3
source to share
1 answer
Just replace (show / hide) with the "toggle" function like this:
$('.slideout-menu li').click(
function() {
$(this).children('.mobile-sub-menu').toggle();
});
And it will work fine.
Toggle Function: http://api.jquery.com/toggle/
+2
source to share