Bootstrap菜單下拉毛刺

Question

今天是個好日子

我已經苦苦掙扎了一個多月了，看看bootstrap和Stackoverflow上的各種資源，我無法解決這個問題。

我有一個跨越整個屏幕寬度的超級菜單。 我面臨的問題可以在下面的小提琴中看到： https ： //jsfiddle.net/btesoj8c/

當您單擊菜單項“Menu0”時，下拉菜單工作完美，然后如果您單擊“Menu1”，下拉列表也可以，但它不會折疊“Menu0”的下拉列表。 因此，這最終導致菜單項的爭奪以使菜單關閉。

代碼如下：

 #main_menu { z-index:999; } .navbar { padding: 0; margin: 0; background: transparent; border: 0px none; } #main_menu .nav { float: right; margin: 22px 0 0 0; } .navbar .nav.pull-right { float: right; margin-right: -30px!important; } #main_menu .nav > li > a { font-weight: 400; letter-spacing: 2px; font-size: 13px; padding: 24px 24px 22px; text-align: center!important; text-transform: uppercase; } #main_menu .nav > .active > a, #main_menu .nav> .active > a:hover { -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } #main_menu .nav > .active > a:focus { background: transparent; } #options { margin:0px 0 -10px; } .header { background: #383838; } .mega-menu [class*="col-"] { margin-top: 5px; margin-bottom: 5px; font-size: 1em; text-align: center; line-height: 2; background-color:#70AB1F; border-right: 1px solid #d1d1d1; height:300px; } #menuItem { background: transparent; display: block; float: left; color: #fff; height: 50px; list-style-image: none; list-style-position: outside; list-style-type: none; margin-left: 25px; margin-top: 10px; text-align: left; width: 120px; cursor: pointer; } .menu-section{ margin-top: 10px; margin-bottom: -5px; font-size: 16px; display: block; text-align: left; float: left; width: 100%; color: #fff; } .menu-subsection{ margin-bottom: -5px; margin-left: 10px; display: block; font-size: 14px; text-align: left; float: left; width: 100%; color: #ededed; } .green{ width: 100%; background-color:#70AB1F; z-index: 9999; position: absolute; } 

 <div class="header "> <nav class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav navbar-collapse "> <li id="menuItem" data-toggle="collapse" class="collapse" data-target="#menu0">Menu0<br/></li> <li id="menuItem" data-toggle="collapse" data-target="#menu1">Menu1<br/></li> <li id="menuItem" data-toggle="collapse" data-target="#">Menu2<br/></li> <li id="menuItem" data-toggle="collapse" data-target="#" >Menu3<br/></li> <li id="menuItem" data-toggle="collapse" data-target="#" >Menu4</li> </ul> </div> <!-- Dropdown Menu --> <div class="collapse green" id="menu0"> <div class="mega-menu container"> <div class="row"> <div class="col-sm-3"> <a class="menu-section" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-section" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> </div> </div> </div> </div> <div class="collapse green" id="menu1"> <div class="mega-menu container"> <div class="row"> <div class="col-sm-3"> <a class="menu-section" href="#">Something else</a> <a class="menu-subsection" href="#">Something</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Something else</a> <a class="menu-subsection" href="#">Something</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Something else</a> <a class="menu-subsection" href="#">Something</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Something else</a> <a class="menu-subsection" href="#">Something</a> </div> </div> </div> </div> 

非常感謝您的協助。

Answer 1

您應該按照以下方式更改HTML結構：

<div id="navmenu">
        <div class="panel">
           <nav class="navbar navbar-default" role="navigation">
                <ul class="nav navbar-nav navbar-collapse ">
                    <li id="menuItem" data-parent="#navmenu"  data-toggle="collapse" data-target="#menu0">Menu0<br/></li>
.
.
.

 <!-- Dropdown Menu --> 
            <div class="collapse green" id="menu0">
                <div class="mega-menu container">
                    <div class="row">

給父div一個id並將其設置為li data-parent ，如此navmenu 。

data-parent屬性，用於確保在顯示其中一個可折疊項目時，將關閉指定父級下的所有可折疊元素。

接下來，使用面板類創建一個div。

你的李有同樣的身份，這是不好的。 為所有li制作不同/唯一的ID。

工作小提琴

 #main_menu { z-index:999; } .navbar { padding: 0; margin: 0; background: transparent; border: 0px none; } #main_menu .nav { float: right; margin: 22px 0 0 0; } .navbar .nav.pull-right { float: right; margin-right: -30px!important; } #main_menu .nav > li > a { font-weight: 400; letter-spacing: 2px; font-size: 13px; padding: 24px 24px 22px; text-align: center!important; text-transform: uppercase; } #main_menu .nav > .active > a, #main_menu .nav> .active > a:hover { -webkit-border-radius: 4px 4px 0px 0px; -moz-border-radius: 4px 4px 0px 0px; border-radius: 4px 4px 0px 0px; } #main_menu .nav > .active > a:focus { background: transparent; } #options { margin:0px 0 -10px; } .header { background: #383838; } .mega-menu [class*="col-"] { margin-top: 5px; margin-bottom: 5px; font-size: 1em; text-align: center; line-height: 2; background-color:#70AB1F; border-right: 1px solid #d1d1d1; height:300px; } #menuItem, #menuItem1, #menuItem2, #menuItem3, #menuItem4 { background: transparent; display: block; float: left; color: #fff; height: 50px; list-style-image: none; list-style-position: outside; list-style-type: none; margin-left: 25px; margin-top: 10px; text-align: left; width: 120px; cursor: pointer; } .menu-section{ margin-top: 10px; margin-bottom: -5px; font-size: 16px; display: block; text-align: left; float: left; width: 100%; color: #fff; } .menu-subsection{ margin-bottom: -5px; margin-left: 10px; display: block; font-size: 14px; text-align: left; float: left; width: 100%; color: #ededed; } .green{ width: 100%; background-color:#70AB1F; z-index: 9999; position: absolute; } 

 <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> <div id="navmenu"> <div class="panel header"> <nav class="navbar navbar-default" role="navigation"> <ul class="nav navbar-nav navbar-collapse "> <li id="menuItem" data-parent="#navmenu" data-toggle="collapse" data-target="#menu0">Menu0<br/></li> <li id="menuItem1" data-parent="#navmenu" data-toggle="collapse" data-target="#menu1">Menu1<br/></li> <li id="menuItem2" data-parent="#navmenu" data-toggle="collapse" data-target="#">Menu2<br/></li> <li id="menuItem3" data-parent="#navmenu" data-toggle="collapse" data-target="#" >Menu3<br/></li> <li id="menuItem4" data-parent="#navmenu" data-toggle="collapse" data-target="#" >Menu4</li> </ul> </nav> <!-- Dropdown Menu --> <div class="collapse green" id="menu0"> <div class="mega-menu container"> <div class="row"> <div class="col-sm-3"> <a class="menu-section" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-section" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> <a class="menu-subsection" href="#">Item</a> </div> </div> </div> </div> <div class="collapse green" id="menu1"> <div class="mega-menu container"> <div class="row"> <div class="col-sm-3"> <a class="menu-section" href="#">Something else</a> <a class="menu-subsection" href="#">Something</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Something else</a> <a class="menu-subsection" href="#">Something</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Something else</a> <a class="menu-subsection" href="#">Something</a> </div> <div class="col-sm-3"> <a class="menu-section" href="#">Something else</a> <a class="menu-subsection" href="#">Something</a> </div> </div> </div> </div> </div> </div>