javascript - How to close a dropdown menu on click? -
if go dev site (it's joomla site using bootstrap) , view on 1023px wide screen or smaller (or smartphone), there hamburger menu. if click it, drops down menu , if click "learn more", jumps form (because it's anchor). however, dropdown menu stays open (because it's not going new page guess).
is there easy way add code says "any dropdown menu click should close dropdown menu"?
here code menu when it's expanded (first nav tag that's important)...
<nav class="t3-navbar-collapse navbar-collapse collapse in"><ul class="nav navbar-nav level0"> <li> <a href="/index.php">home </a> </li> <li class="dropdown"> <a href="/index.php/features" data-toggle="dropdown" data-target="#">features <b class="caret"></b></a> <ul class="level1 dropdown-menu"><li> <a href="/index.php/features/scheduling-routing">scheduling & routing </a> </li><li> <a href="/index.php/features/billing-invoicing">billing & invoicing </a> </li><li> <a href="/index.php/features/mobile-workforce">mobile workforce </a> </li><li> <a href="/index.php/features/office-staff-persona">office staff persona </a> </li><li> <a href="/index.php/features/owner-persona">owner persona </a> </li><li> <a href="/index.php/features/field-worker-persona">field worker persona </a> </li></ul></li> <li class="dropdown"> <a href="/index.php/industries" data-toggle="dropdown" data-target="#">industries <b class="caret"></b></a> <ul class="level1 dropdown-menu"><li> <a href="/index.php/industries/cleaning">cleaning </a> </li><li> <a href="/index.php/industries/lawn">lawn </a> </li><li> <a href="/index.php/industries/pest">pest </a> </li><li> <a href="/index.php/industries/hvac">hvac </a> </li></ul></li> <li> <a href="/index.php/pricing">pricing </a> </li> <li class="active dropdown"> <a href="/index.php/about" data-toggle="dropdown" data-target="#">about <b class="caret"></b></a> <ul class="level1 dropdown-menu"><li class="current active"> <a href="/index.php/about/resources">resources </a> </li><li> <a href="/index.php/about/support">support </a> </li><li> <a href="/index.php/about/security">security </a> </li></ul></li> <li class=""> <a href="#leadform">learn more</a> </li> <li> <a href="#leadform">contact</a> </li> <li> <a href="/index.php/log-in">log in </a> </li> </ul></nav>
and when collapses again, classes in nav tag this...
<nav class="t3-navbar-collapse navbar-collapse collapse" style="height: 1px;">
so looks class of "in" needs go away. therefore, trying jquery, isn't working. shouldn't work?
jquery(function($) { $("li a").click(function() { $("nav.t3-navbar-collapse").removeclass( "in" ); }); });
sorry bad luck on first question, did have snippet on hand you.
basically want tell code close nav when click anchor, target a
, use slideup
property.
$(document).ready(function(){ $("a").click(function(){ $("your_nav_id").slideup('slow'); }); });
Comments
Post a Comment