我可以在 li 上使用数据切换下拉菜单吗？在引导程序中答案

【问题标题】：Can I use a data-toggle dropdown on a li? In Bootstrap我可以在 li 上使用数据切换下拉菜单吗？在引导程序中
【发布时间】：2016-04-05 13:43:01
【问题描述】：

我正在bootstrap 中创建dropdown menu。
现在我在li 中使用a 元素，其中描述了切换下拉菜单。

但我实际上想将a 元素中的内容放入li... 因为整个li 必须是可点击的。

希望你们给我小费。 ;)

<ul class="list-group">
    <li class="list-group-item">
        <a class="dropdown-toggle" data-toggle="dropdown">
            Applicatie Ontwikkeling
        </a>
        <ul class="dropdown-menu">
            <li class="list-group-item">HTML</li>
            <li class="list-group-item">CSS</li>
            <li class="list-group-item">jQuery</li>
        </ul>
    </li>
    <li class="list-group-item">Netwerk Beheer</li>
    <li class="list-group-item">Server Beheer</li>
</ul>

【问题讨论】：

这样做有什么具体原因吗？
这个洞必须是可点击的@Sahil

标签： html twitter-bootstrap menu toggle dropdown

【解决方案1】：

请将'dropdown'类应用到你想像这样添加下拉列表的li。

<ul class="list-group">
<li class="list-group-item dropdown">
    <a class="dropdown-toggle" data-toggle="dropdown">
        Applicatie Ontwikkeling
    </a>
    <ul class="dropdown-menu">
        <li class="list-group-item">HTML</li>
        <li class="list-group-item">CSS</li>
        <li class="list-group-item">jQuery</li>
    </ul>
</li>
<li class="list-group-item">Netwerk Beheer</li>
<li class="list-group-item">Server Beheer</li>

【讨论】：

不，对不起，它和以前完全一样:(

【解决方案2】：

你可以让a标签占据全宽，然后整个li变成可点击的。

.dropdown-toggle{
 display:inline-block;
  width: 100%;
  cursor: pointer;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<ul class="list-group">
    <li class="list-group-item">
        <a class="dropdown-toggle" data-toggle="dropdown">
            Applicatie Ontwikkeling
        </a>
        <ul class="dropdown-menu">
            <li class="list-group-item">HTML</li>
            <li class="list-group-item">CSS</li>
            <li class="list-group-item">jQuery</li>
        </ul>
    </li>
    <li class="list-group-item">Netwerk Beheer</li>
    <li class="list-group-item">Server Beheer</li>
</ul>

【讨论】：