javascript - 使用 Span 触发 Bootstrap 下拉列表

Question

我在标题中有几个图标，这些图标使用字体并用

包裹

<li style="margin-top: 15px">
    <span class="myIcons" id="messages" style="font-size: 5px">m</span>
</li>

我想用它来触发 bootstrap 下拉菜单，但是在它的文档中，它使用了按钮和 div，我不知道如何在单击字体时触发它。

我应该尝试使用 jquery 并尝试在点击 #messages 时触发下拉菜单打开吗？

Answer 1

您不必使用 <button>的和<div>的 - 重要的是要有一个 data-toggle="dropdown"在触发元素上:

<ul class="dropdown">  

  <!-- your markup -->  
  <li style="margin-top: 15px" data-toggle="dropdown">
      <span class="myIcons" id="messages" style="font-size:5px">m</span>
  </li>
  <!--// your markup -->      

  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</ul>

演示 -> http://jsfiddle.net/7ujpzs58/