Question

我正在尝试使用bootstrap 3进行多个导航工作。目前我有一个问题，即单击第一个菜单（即左侧的汉堡菜单 - 请参阅附加图像）打开所有菜单项。下一次单击将关闭所有项目，然后后续单击按预期运行，一次打开一个菜单项。

<div class="navbar navbar-inverse navbar-fixed-top" id="#navGroup">
    <div class="container">
        <div class="row" id="navGroup">
            <div class="navbar-header col-xs-4">
                <button type="button" class="navbar-toggle navbar-left" data-toggle="collapse" data-target=".burger-collapse" data-parent="#navGroup">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                </button>
            </div>
            <div class="navbar-header col-xs-4">
                <a class="navbar-brand" href='@Url.Action("Home", "Home")'>
                <i class="glyphicon glyphicon-home logo-glyph"></i>
                </a>
            </div>
            <div class="navbar-header col-xs-4">
                <button class="navbar-toggle glyphicon air-listing-nav glyphicon-user" data-toggle="collapse" data-target=".profile-collapse" data-parent="#navGroup"></button>
                <button class="navbar-toggle glyphicon air-listing-nav glyphicon-bell" data-toggle="collapse" data-target=".notifications-collapse" data-parent="#navGroup"></button>
                <button class="navbar-toggle glyphicon air-listing-nav glyphicon-question-sign" data-toggle="collapse" data-target=".help-collapse" data-parent="#navGroup"></button>
            </div>
        </div>
        <div class="navbar-collapse collapse burger-collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Home", "Home", "Home")</li>
                <li>@Html.ActionLink("Profile", "Profile", "Profile")</li>
            </ul>
        </div>
        <div  class="navbar-collapse collapse navbar-right profile-collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Profile", "Profile", "Profile")</li>
                <li>@Html.ActionLink("Settings", "Settings", "ManageSettings")</li>
            </ul>
        </div>
        <div  class="navbar-collapse collapse navbar-right notifications-collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Notifications", " ", "Profile")</li>
            </ul>
        </div>
        <div  class="navbar-collapse collapse navbar-right help-collapse">
            <ul class="nav navbar-nav">
                <li>@Html.ActionLink("Help", " ", "Profile")</li>
            </ul>
        </div>
    </div>
</div>

JS ：

<script>    
    $(function () {
        $(document).click(function (event) {
            $('.navbar-collapse').collapse('hide');
        });
    });
</script>

附加图片

（现在请忽略样式问题，一旦菜单正常工作，我将处理样式）

Nav Itens已关闭：

点击汉堡菜单，打开所有导航项

一次只能打开一个菜单

我到处搜索但找不到适合我的答案。我在其他地方建议使用数据父级＆amp;为每个菜单提供唯一的数据目标。

任何帮助将不胜感激。

Answer 1

我认为您可以根据以下示例自行简化：dropdown example

在实践中：

＆＃13;

.navbar-brand-centered {
    position: absolute;
    left: 50%;
    width: 160px;
    text-align: center;
}
.navbar>.container .navbar-brand-centered {
    margin-left: -80px!important;
}

.navbar-nav>li, .navbar-nav{
  float: left !important;
}

.navbar-right {
  float: right !important;
}

.nav.navbar-nav .dropdown {
  width: 48px;
  position: relative;
}

.nav.navbar-nav {
  margin: 0;
}

.nav.navbar-nav>li>a {
  padding-top: 15px;
  padding-bottom: 15px;
}

.nav.navbar-nav .dropdown.open .dropdown-menu li a:hover {
  color: #262626;
  text-decoration: none;
  background-color: #f5f5f5;
}

.nav.navbar-nav .dropdown ul {
    position: absolute;
    top: 100%;
    left: 0;
    float: left;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.15);
    background-clip: padding-box;
    box-shadow: rgba(0, 0, 0, 0.176) 0px 6px 12px;
    
}

.nav.navbar-nav.navbar-right .dropdown ul {
    right: 0;
    left: auto;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

<div class="my-example">
    <nav id="myNavbar" class="navbar navbar-inverse navbar-toggleable navbar-fixed-top" role="navigation">
        <div class="container">
          
            <div class="navbar-header">
              <div class="navbar-brand navbar-brand-centered">
                <a href="#"> <i class="fa fa-lg fa-home"></i> </a>
              </div>
            </div>
            
            <!--first burger like dropdown-->
            <ul class="nav navbar-nav">
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-lg fa-bars"></i> </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </li>
            </ul>

            <!--group of 3 icon dropdowns-->
            <ul class="nav navbar-nav navbar-right">

                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-question"></i> </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-bell"></i> </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </li>
                <li class="dropdown">
                    <a href="#" data-toggle="dropdown" class="dropdown-toggle"> <i class="fa fa-user"></i> </a>
                    <ul class="dropdown-menu">
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                        <li><a href="#">Item</a></li>
                    </ul>
                </li>
            </ul>
        </div>
    </nav>
</div>

＆＃13;

我不确定你为什么需要底部的脚本。

编辑：更改为更具响应性

bootstrap 3个多个导航项目一次打开

1 个答案: