javascript - Secondary menu disappear when first menu toggle? -
my problem : have mega menu , when item toggled want secondary menu disappear
$(document).on('click', '.yamm .dropdown-menu', function (e) { e.stoppropagation() }) var togglebutton = document.getelementbyid('toggleslider'), slide = document.queryselector('.slide'); togglebutton.addeventlistener('click', toggleslider, false); function toggleslider() { if (slide.classlist.contains('slide-up')) { slide.classlist.remove('slide-up'); } else { slide.classlist.add('slide-up'); } } function show(target) { document.getelementbyid(target).style.display = 'block'; } function hide(target) { document.getelementbyid(target).style.display = 'none'; } function showhide(id) { var e = document.getelementbyid(id); if (e.style.display == 'none') { e.style.display = 'block'; } else { e.style.display = 'none'; } }
just listen bootstraps dropdown events , show , hide sous-menu. take @ snippet.
$(document).on('click', '.yamm .dropdown-menu', function(e) {e.stoppropagation()}) $('.dropdown').on('show.bs.dropdown', function () { $('#sous-menu').hide(); }) $('.dropdown').on('hide.bs.dropdown', function () { $('#sous-menu').show(); })/*! * yamm!3 - yet megamenu bootstrap 3 * http://geedmo.github.com/yamm3 * * @geedmo - licensed under mit license */ .yamm .nav, .yamm .collapse, .yamm .dropup, .yamm .dropdown { position: static; padding-left:0!important; padding-right:0!important } .yamm .container { position: relative; } .yamm .dropdown-menu { left: auto; } .yamm .yamm-content { padding: 20px 30px; } .yamm .dropdown.yamm-fw .dropdown-menu { left: 0; right: 0; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/> <div class="container"> <div class="col-md-9"> <div class="navbar navbar-default yamm fw"> <div class="navbar-header fw"> <button type="button" data-toggle="collapse" data-target="#navbar-collapse-grid" class="navbar-toggle"><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> </div> <div id="navbar-collapse-grid" class="navbar-collapse collapse navbar-right fw"> <ul class="nav navbar-nav fw"> <!-- decouvrir la sem --> <li class="dropdown yamm-fw col-md-4"><a href="#" data-toggle="dropdown" class="dropdown-toggle">discover</a> <ul class="dropdown-menu bggreen"> <li class="grid-menu"> <div class="col-md-4">best practices</div> <div class="col-md-4">team</div> <div class="col-md-4">partners</div> </li> </ul> </li> <li class="dropdown yamm-fw col-md-4"><a href="#" data-toggle="dropdown" class="dropdown-toggle">services</a> <ul class="dropdown-menu bgyellow"> <li class="grid-menu"> <div class="col-md-4">item 1</div> <div class="col-md-4">item 2</div> <div class="col-md-4">item 3</div> </li> </ul> </li> <li class="dropdown yamm-fw col-md-4"><a href="#" data-toggle="dropdown" class="dropdown-toggle">work us</a> <ul class="dropdown-menu bgblue"> <li class="grid-menu"> <div class="col-md-4">item 1</div> <div class="col-md-4">item 2</div> <div class="col-md-4">item 3</div> </li> </ul> </li> </ul> </div> </div> </div> <div class="col-md-9" id="sous-menu"> <div class="col-md-2" style="background:white">item1</div> <div class="col-md-3" style="background:white">item2</div> <div class="col-md-3" style="background:white">item3</div> <div class="col-md-4" style="background:white">item4</div> </div> </div>i did remove inline call showhide function li elements. don't need them.
Comments
Post a Comment