jquery - How can i make my sub-menu show and hide when click on 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 { 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 { 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 buy</a></li> <li><a href="#">support</a></li> <li><a href="#">edit book</a></li> </ul> </div>
i add sub-item under manuals main item. can make sub-menu hide , show when click on parent main item?
i try write jquery code right can hide item cannot let show again. wrong on jquery code?
just replace (show/hide) "toggle" function :
$('.slideout-menu li').click( function() { $(this).children('.mobile-sub-menu').toggle(); });
and work fine .
toggle function : http://api.jquery.com/toggle/
Comments
Post a Comment