javascript - Bootstrap 菜单下拉故障

Question

大家好

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

我有一个跨越整个屏幕宽度的大型菜单。我面临的问题可以在下面的 fiddle 中看到: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，这不好。为所有 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>