如何制作Bootstrap版本2标签下拉菜单？

Question

我想使我的引导选项卡2下拉。 建议我这是我的代码。 我在MVC中使用。

的HTML

<div id="tabs" style="border: 0px; width:100%;"> 
    <ul id="uTabs">     
        <li><a href="#tabs-1"><strong>Teacher</strong></a></li> 
        <li><a href="#tabs-2"><strong>Student</strong></a></li> 
    </ul> 
    <div id="tabs-1" class="PageContent">
    </div>
    <div id="tabs-2" class="PageContent">
    </div>    
</div>

JS

<script type="text/javascript">
    $(function () {
        $tabs = $('#tabs').tabs();
        $tabs.tabs({select: function (event, ui) {
                if (ui.index == 0 || ui.index == 1 || ui.index == 2) {
                }
                var url = $.data(ui.tab, 'load.tabs');
                if (url) {
                    location.href = url;
                    return false;
                }
                return true;
            }});
    });
</script>

Answer 1

您可以使用

bootstrap-tabdrop.js

此处链接下载https://github.com/jmschabdach/bootstrap-tabdrop

你可以这样使用

                         <ul class="nav nav-tabs">
                                    <li class="active">
                                        <a href="#tab_1_1" data-toggle="tab"> Home </a>
                                    </li>
                                    <li>
                                        <a href="#tab_1_2" data-toggle="tab"> Profile </a>
                                    </li>
                                    <li class="dropdown">
                                        <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown"> Dropdown
                                            <i class="fa fa-angle-down"></i>
                                        </a>
                                        <ul class="dropdown-menu" role="menu">
                                            <li>
                                                <a href="#tab_1_3" tabindex="-1" data-toggle="tab"> Option 1 </a>
                                            </li>
                                            <li>
                                                <a href="#tab_1_4" tabindex="-1" data-toggle="tab"> Option 2 </a>
                                            </li>
                                            <li>
                                                <a href="#tab_1_3" tabindex="-1" data-toggle="tab"> Option 3 </a>
                                            </li>
                                            <li>
                                                <a href="#tab_1_4" tabindex="-1" data-toggle="tab"> Option 4 </a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>