带有下拉菜单的 Twitter 引导导航药丸

Posted 2023-03-06

【中文标题】带有下拉菜单的 Twitter 引导导航药丸

【英文标题】：Twitter bootstrap nav-pills with dropdown

【发布时间】：2014-03-19 13:37:41

【问题描述】：

我使用 Twitter bootstrap 3 创建了 nav-pills。 除了下拉菜单，一切都很好。 文档显示选项卡链接的布局，但不显示内容：http://getbootstrap.com/components/#nav-dropdowns

我想在用户选择下拉链接之一时显示内容。

小提琴是这样的：http://jsfiddle.net/mavent/skL5H/3/

<div class="tabbable">
    <ul class="nav nav-tabs nav-pills" id="myTab">
        <li class="active"> <a href="#tab1" data-toggle="tab">Part 1</a>

        </li>
        <li class=""> <a href="#tab2" data-toggle="tab">Part 2</a>

        </li>
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Activity <span class="caret"></span></a>

            <ul class="dropdown-menu" role="menu">
                <li><a href="#tab3">Action</a>
                </li>
                <li><a href="#tab4">Another action</a>
                </li>
            </ul>
        </li>
    </ul>
    <br>
    <div class="tab-content">
        <div class="tab-pane active" id="tab1">aaaaaaaaaaaa</div>
        <div class="tab-pane" id="tab2">bbbbbbbbbbbb</div>
        <div class="tab-pane" id="tab3">cccccccccccccc</div>
        <div class="tab-pane" id="tab4">dddddddddddddd</div>
    </div>
</div>

【参考方案1】：

将data-toggle="dropdown" 添加到.dropdown-menu 中的链接。

http://jsfiddle.net/skL5H/5/