Twitter引导拆分下拉列表 [英] Twitter bootstrap split dropdown

问题描述

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

I have a navbar and I have a caret next to dropdown menu.

在当前代码中，如果用户点击操作文字或插入符号，下拉菜单被打开。但是我需要这样：

In current code, if user clicks Operations text or caret, dropdown menu is opened. But I need this:

• 如果用户点击操作链接，我希望用户转到我的 / operations / 页面。


• 如果用户单击插入符号，下拉菜单将可见。如果用户单击下拉菜单中的一个元素，用户将被重定向到相关页面。

• If user clicks Operations link, I want user to go to my /operations/ page.
• If user clicks to the caret, dropdown menu will be visible. If user click one of the elements of dropdown menu, user will be redirected to related page.

小提琴： http://jsfiddle.net/mavent/UtDqm/2/

<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 。我不想使用按钮。是否可以在不使用按钮的情况下进行拆分。只有链接？

In Twitter bootstrap documentation it is noted how to create split button dropdowns here. I don't want to use buttons. Is it possible to have split behaviour without using buttons. Just with links?

推荐答案

你不能将操作链接拆分成新的< a> ; 标签？

Couldn't you just split the Operations link into a new <a> tag?

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

这篇关于Twitter引导拆分下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！