twitter-bootstrap Bootstrap 下拉菜单默认在网站加载时打开
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/24113223/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap dropdown-menu defaults to open when site loads
提问by Michael
The issue I am having is that I have added a dropdown menu inside of my navigation bar for my site that uses bootstrap, and cannot figure out why the dropdown opens as the default state when the site opens. I am new to bootstrap. I have attached the code for the navbar below:
我遇到的问题是，我在使用引导程序的网站的导航栏中添加了一个下拉菜单，但无法弄清楚为什么在网站打开时下拉菜单会以默认状态打开。我是引导程序的新手。我在下面附上了导航栏的代码：
<div class="navbar navbar-inverse">
<ul class="nav nav-pills pull-right">
<li class="dropdown">
<a data-toggle="dropdown" class="dropdown-toggle">
<span class="glyphicon glyphicon-list"></span>
</a>
<ul role="menu" class="dropdown-menu">
<li><a>Add New Item</a></li>
<li><a>PC Requests</a></li>
<li><a>Kit Building</a></li>
</ul>
</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Audit</a></li>
<li><a href="#">Check-Out</a></li>
<li><a href="#">Check-In</a></li>
</ul>
<h3 class="text-muted"><span class="glyphicon glyphicon-eye-open"></span> Gentex Vision IVMS</h3>
</div>
Any help would be greatly appreciated!
任何帮助将不胜感激！
回答by Mile Mijatovi?
The point is to add opento <li class="dropdown">.
重点是添加open到<li class="dropdown">.
Practically, it should look like this
实际上，它应该是这样的
<div class="navbar navbar-inverse">
<ul class="nav nav-pills pull-right">
<li class="dropdown open">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
<span class="glyphicon glyphicon-list"></span>
</a>
<ul role="menu" class="dropdown-menu">
<li><a>Add New Item</a></li>
<li><a>PC Requests</a></li>
<li><a>Kit Building</a></li>
</ul>
</li>
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Audit</a></li>
<li><a href="#">Check-Out</a></li>
<li><a href="#">Check-In</a></li>
</ul>
<h3 class="text-muted"><span class="glyphicon glyphicon-eye-open"></span> Gentex Vision IVMS</h3>
then it will be open by default
那么它将默认打开
Best regards
最好的祝福
回答by Kevin Genus
Given the following (copied from Bootstrap), line #13 contains: class="dropdown-menu show". The dropdown menu is displayed on each successive page load. Remove the word showto prevent this behavior.
鉴于以下内容（从 Bootstrap 复制），第 13 行包含：class="dropdown-menu show"。下拉菜单显示在每个连续的页面加载中。删除单词show以防止这种行为。
<ul class="nav nav-tabs">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#home">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#">Disabled</a>
</li>
<li class="nav-item dropdown show">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="true">Dropdown</a>
<div class="dropdown-menu show" x-placement="bottom-start" style="position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 39px, 0px);">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
Hope this helps.
希望这可以帮助。
回答by Djordje Milo?evi?
aria-expanded="false" Point is to change false value
aria-expanded="false" 点是改变假值
