Question

我有一个导航栏，下拉菜单旁边有一个插入符号。

在当前代码中，如果用户点击Operations文字或插入符号，则会打开下拉菜单。但我需要这个：

如果用户点击Operations链接，我希望用户转到我的/operations/页面。
如果用户点击了插入符号，则会显示下拉菜单。如果用户单击下拉菜单中的一个元素，则用户将被重定向到相关页面。

<div class="navbar navbar-inverse">
  <li class="dropdown" id="myTools">
    <a class="dropdown-toggle" data-toggle="dropdown" href="#myTools">
        Operations
        <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
        <li><a href="/mypage1/">MyPage 1</a></li>
        <li><a href="/mypage2/">MyPage 2</a></li>
    </ul>
  </li>  
</div>

在Twitter引导程序文档中，我们注意到如何创建分割按钮下拉列表here。我不想使用按钮。是否可以在不使用按钮的情况下进行拆分行为。只是链接？

Answer 1

您难道不能将Operations链接拆分为新的<a>代码吗？

<div class="navbar navbar-inverse">
  <li class="dropdown" id="myTools">
    <a href="/operations/" style="display:inline-block;padding-right:0px;">Operations</a>
    <a class="dropdown-toggle" data-toggle="dropdown" href="#myTools"  style="display:inline-block;padding-left:0px;">
      <b class="caret"></b>
    </a>
    <ul class="dropdown-menu">
      <li><a href="/mypage1/">MyPage 1</a></li>
      <li><a href="/mypage2/">MyPage 2</a></li>
    </ul>
  </li>  
</div>

Answer 2

你在找这样的东西吗？

<div class="btn-group">
    <a href="http://google.com" target="_blank" class="btn btn-link">Action</a>
   <a href="#" class="btn btn-link dropdown-toggle" data-toggle="dropdown">
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
        <li><a href="/mypage1/">MyPage 1</a></li>
        <li><a href="/mypage2/">MyPage 2</a></li>
    </ul>
</div>

http://jsfiddle.net/UtDqm/6/

Twitter bootstrap拆分下拉列表

2 个答案: