引导菜单下拉故障

Question

大家好

我已经为此苦苦挣扎了一个多月，查看了 bootstrap 和 * 上的各种资源，但我无法解决这个问题。

我有一个横跨整个屏幕宽度的大型菜单。我面临的问题可以在下面的小提琴中看到：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 并将其设置为 data-parent 的 li 就像这里的 navmenu。

data-parent 属性以确保在显示可折叠项之一时，指定父项下的所有可折叠元素都将关闭。

接下来，用面板类制作一个 div。

而且你的 li 有相同的 id，这不好。为所有 li 设置不同/唯一的 id。

Working Fiddle

#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>