Html 如何使用引导程序为 <li> 创建下拉菜单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29857704/
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
How to create dropdown for <li> using bootstrap
提问by romman
I need to make drop down for one <li>element
我需要为一个<li>元素下拉
<div class="head-nav">
<span class="menu"></span>
<ul class="cl-effect-15">
<li><a href="index.php" data-hover="HOME">HOME</a></li>
<li><a href="about.php">ABOUT</a></li>
<li><a href="contact.php" data-hover="CONTACT">CONTACT</a></li>
<li><a href="#" data-hover=" "> </a></li>
<li><a href="3" data-hover=" "> </a></li>
<li class="pull-right"><a href="#" data-hover="More option" tabindex="-1">More options</a>
<ul class="dropdown-menu">
<li><a href="#" data-hover=" ">one</a></li>
<li><a href="3" data-hover=" ">two</a></li>
</ul>
</li>
<li class="pull-right"><a href="logout.php" data-hover="logout">logout</a></li>
<div class="clearfix"> </div>
</ul>
</div>
but sub menu doesn't opens
但子菜单没有打开
using Bootstrap v3.1.1
使用 Bootstrap v3.1.1
NOTE: even adding after jqueryalso doesn't works
注意：即使添加jquery也不起作用
回答by MTS
You have to use
你必须使用
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li class="divider"></li>
<li><a href="#">Separated link</a></li>
<li class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
In your code, you miss class "dropdown" for li tag. For correct dropdown, you have to use this sintax:
在您的代码中，您错过了 li 标签的类“下拉列表”。要获得正确的下拉列表，您必须使用此语法：
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Item Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<!--- Put your menu-item here -->
</ul>
</li>
You can refer the Bootstrap documentation here
您可以在此处参考 Bootstrap 文档
The issue is causing by the missing of data-toggle="dropdown"in tag a
问题是由于缺少data-toggle="dropdown"in 标签 a
回答by Guarana
Maybe you search this solution: JSBin
也许你搜索这个解决方案：JSBin
For example: You need add the content: attr(data-hover); on your before element. HTML:
例如： 您需要添加内容： attr(data-hover); 在你之前的元素上。HTML：
<li class="HOVER"><a href="#" data-hover="More option" tabindex="-1">More options</a>
CSS:
CSS：
.HOVER {
border: solid 7px #000;
padding: 20px;
text-transform: uppercase;
font-weight: bold;
color: #fff;
position: relative;
width: 300px;
}
.HOVER:hover a:before {
content: attr(data-hover);
color: red;
display: block;
background: #000;
position: absolute;
top: 100%;
left: -7px;
right: -7px;
padding: 15px;
}
回答by Alexander Solonik
You're missing the the following attributes:
您缺少以下属性：
class="dropdown-toggle" data-toggle="dropdown"
and those attributes go on the element you want to be the "Hook" for the dropdown list.
并且这些属性位于您希望成为下拉列表“挂钩”的元素上。
Sample markup below:
下面的示例标记：
<li class="dropdown">
<a href="#lala" class="dropdown-toggle" data-toggle="dropdown" >
Java
<b class="caret"></b>
</a>
<ul class="dropdown-menu" role="listbox">
<li><a href="#lala1" role="option">jmeter</a></li>
<li><a href="#lala2" role="option">EJB</a></li>
<li><a href="#lala3" role="option">Jasper Report</a></li>
<li class="divider"></li>
<li><a href="#" role="option">Separated link</a></li>
<li class="divider"></li>
<li><a href="#" role="option">One more separated link</a></li>
</ul>
</li>
Edit
编辑
Here is an example Fiddle; notice how if you remove data-toggle="dropdown", the code won't work . :)
这是一个示例Fiddle；请注意，如果您删除data-toggle="dropdown"，代码将不起作用。:)
