Question

我正在dropdown menu中bootstrap 现在我在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>

Answer 1

请将“下拉”课程应用于您想要添加下拉列表的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>

Answer 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>

我可以在li上使用数据切换下拉列表吗？在Bootstrap中

2 个答案: