Question

我的问题：我有一个超级菜单，当项目切换时，我希望我的二级菜单消失

$(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

只需听取bootstraps下拉事件，然后显示并隐藏 sous-menu 。看一下片段。

$(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>

我确实从li元素中移除了对showhide函数的内联调用。你不需要它们。

Answer 2

我认为这样的方式很好.. 只需要添加这个jquery部分。

div.container
{
width:100%;
height:100%;
position:absolute;
}

<强> Check this DEMO

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

2 个答案: