Question

我在twitter bootstrap容器上有一个图标。我想点击它并让下拉列表显示包含指向其他网站的链接的不同选项。现在，我可以获得下拉列表，但它会自动显示在页面上，而不会点击图标，而是每个链接都在彼此之上。基本上我想在eclipse中的任何“按钮”的功能，如“文件，编辑，源，导航...”等，你点击它，然后出现下拉列表。但是我需要将它附加到一个图标上。这是我尝试失败的原因：

  <a id="myIcon" href="#" class="btn-mini" type="button"><i class="icon-wrench"  title="Help" ></i></a>
    <div id="helpMenu" class="menu">
        <a class="menuItem" href="#">Help</a>
        <a class="menuItem" href="#">Ideas</a>
        <a class="menuItem" href="#">Issues</a>
    </div>

我觉得我忽略了一个简单的解决方案。有什么建议吗？

Answer 1

您需要在标记中添加适当的data-属性，最好将下拉列表放在列表中，例如

<div class="dropdown">
  <a role="button" data-toggle="dropdown" href="#"><i class="icon-wrench"  title="Help" ></i></a>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
    <li role="presentation"><a role="menuItem" href="#">Help</a></li>
    <li role="presentation"><a role="menuItem" href="#">Ideas</a></li>
    <li role="presentation"><a role="menuItem" href="#">Issues</a></li>
  </ul>
</div>

需要将下拉列表附加到“按钮”类型的图标

1 个答案: