我尝试向 <a> 添加一个 Bootstrap 下拉按钮，但下拉菜单不起作用。我该怎么做呢？答案

【问题标题】：I tried to add a Bootstrap dropdown button to <a> but the dropdown menu wont work. How do I do this?我尝试向 <a> 添加一个 Bootstrap 下拉按钮，但下拉菜单不起作用。我该怎么做呢？
【发布时间】：2015-05-23 12:10:34
【问题描述】：

<li><a href="#" class=" dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">CONTACT<span class="caret"></span></a>    
    </li>
        <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>

谁能帮帮我。里面的一切都来自bootstrap的网站。这是整个html文件 http://pastebin.com/YXsVPRhz

【问题讨论】：

标签： javascript jquery html twitter-bootstrap drop-down-menu

【解决方案1】：

将ul 添加为锚的兄弟

<li>
    <a href="#" class=" dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-expanded="true">CONTACT<span class="caret"></span></a> 
    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a>
        </li>
        <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a>
        </li>
    </ul>
</li>

演示：Fiddle

【讨论】：

【解决方案2】：

您缺少a.dropdown-toggle 中的data-target，以及目标ul 的id。

对于a，添加一个data-target属性，它是ul的id：
data-toggle="dropdown" //sample name

对于ul，添加一个id：
id="dropdown" //sample name

应该是这样的：

<li><a href="#" class=" dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" data-target="dropdown-menu" aria-expanded="true">CONTACT<span class="caret"></span></a>    
    </li>
        <ul class="dropdown-menu" id="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
            <li role="presentation"><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
        </ul>

【讨论】：