Bootstrap菜单下拉故障

Question

Bootstrap菜单下拉故障

javascriptjqueryhtmlcsstwitter-bootstrap

6

大家好，

我已经努力了一个多月，查看了各种关于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>

您的帮助将不胜感激。

- ChaveVrey

只是一个小技巧 - https://jsfiddle.net/Jinukurian7/btesoj8c/4/ - Jinu Kurian

谢谢Jinu，不过还不太行，当你在fiddle上关闭菜单时，它会弹出一个宽度不足的菜单，并且菜单没有完全折叠。 - ChaveVrey

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- ketan · Accepted Answer

您应该像以下方式更改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 属性可以确保在指定的父级下所有可折叠元素在显示其中一个可折叠项时都会关闭。

接下来，创建一个具有 panel 类的 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>