Question

我有两个来自字体图标的图标，我正在尝试将它们分配给bootstrap的下拉列表，以便在其中添加附加通知。

  <li class="col-md-offset-0" style="list-style-type: none">
      <ul class="nav navbar-nav" style="float: right; height: 70px">
        <li style="margin-top: 9px; padding-right: 35px" data-toggle="dropdown">
             <span class="customIconSet" style="font-size: 25px; cursor: pointer">m</span>
        </li>
         <ul class="dropdown-menu dropdown-menu right">
             <li><a href="#">AA</a></li>
         </ul>
         <li style="margin-top: 1px; padding-right: 15px" data-toggle="dropdown">
              <span class="customIconSet" style="font-size: 25px; cursor: pointer">n</span>
         </li>
         <ul class="dropdown-menu dropdown-menu right">
              <li><a href="#">BB</a></li>
        </ul>
      </ul>
   </li>

但是，我有两个问题。

1）在屏幕左侧创建下拉列表，其中图标位于右侧。因此形式与它弹出的地方完全无关。

2）即使我点击触发下拉列表的其他图标，它也会打开BB下拉列表。与此同时，感觉就像BB占据了更大的区域（就像一个隐藏的div），所以这似乎就是原因。

修改：Here is a fiddle on bootply。问题1在这个例子中没有发生，但发生了2。

提前致谢

Answer 1

我认为这可能是您正在寻找的：

http://www.bootply.com/mBFRyBTJG4

我更改了一些格式以适应正常的bootstrap下拉格式，更多内容如下：

<li class="dropdown">
<button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
Dropdown
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<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>
</li>

通过确保格式正确且具有个人ID，您应该能够为每个项目打开正确的下拉列表。

Twitter DropDown - 由Icon而不是Button触发

1 个答案: