Javascript Twitter下拉菜单-由图标而非按钮触发

我有两个来自字体图标的图标，我正试图将它们分配到引导程序的下拉列表中，以便在其中添加附加通知

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

M





N

然而，我有两个问题

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

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

编辑：。 在本例中，问题1不会发生，但问题2会发生

---

提前谢谢

我想这可能就是你想要的：

我更改了一些格式，以适应正常的引导下拉格式，大致如下：

<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，您应该能够为每个项目打开正确的下拉列表。

在ul中有两个ul，它们的语法无效，如果它们是李的一部分，你需要把它们移到里面tags@PatrickEvans只是添加了一个小提琴来更清晰地显示我的问题，它在bootply中工作得非常完美，但是当我将您的代码复制并改编到我的代码中时，第二个下拉列表不会打开（BB），即使html正在更改。（这两个都在变化：

如果您将代码复制并粘贴回bootply，是吗？