当第一个菜单切换时，辅助菜单消失了吗？

Question

My problem : I have a mega menu and when item are toggled I want my secondary menu to disappear

FIDDLE

$(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';
    }
}

Answer 1

Just listen for bootstraps dropdown events and then show and hide your sous-menu . Take a look at the 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 another megamenu for Bootstrap 3 * http://geedmo.github.com/yamm3 * * @geedmo - Licensed under the 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 with 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 the inline call to the showhide function from your li elements. You don't need them.

Answer 2

I assumed like this way is it fine.. Just you need to add this jquery part.

$("button").on("click", function (e) {
    console.log("dg");
    if ($("button").hasClass('cl')) {
        $("button").removeClass("cl");
        $('#sous-menu')..fadeIn();
    } else {
        $("button").addClass("cl");
        $('#sous-menu').fadeOut();
    }
});
$('.dropdown-toggle').dropdown();

Check this DEMO