Twitter bootstrap 3 选项卡下拉菜单答案

【问题标题】：Twiiter bootstrap 3 Tab DropdownTwitter bootstrap 3 选项卡下拉菜单
【发布时间】：2014-03-20 20:09:37
【问题描述】：

我正在尝试制作两个下拉菜单。第二个下拉菜单不起作用。谁能帮帮我？

所以我有带有 2 个下拉菜单的选项卡面板。他们每个人都有自己的下拉列表

<ul class="nav nav-tabs">   
        <li class="dropdown active">
            <a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown">Main Settings <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
                <li class="active"><a href="#general" tabindex="-1" data-toggle="tab">General</a></li>
                <li><a href="#contact" tabindex="-1" data-toggle="tab">Contacts</a></li>
                <li><a href="#knowledge" tabindex="-1" data-toggle="tab">Skills</a></li>
                <li><a href="#education" tabindex="-1" data-toggle="tab">Education</a></li>           
            </ul>
        </li>
        <li class="dropdown">
            <a href="#" id="myTabDrop2" class="dropdown-toggle" data-toggle="dropdown">Account Settings <b class="caret"></b></a>
            <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop2">
                <li class="active"><a href="#profile-photo" tabindex="-1" data-toggle="tab">Notifications</a></li>
                <li><a href="#email-password" tabindex="-1" data-toggle="tab">E-mail & Password</a></li>
                <li><a href="#social" tabindex="-1" data-toggle="tab">Social</a></li>         
            </ul>   
        </li>
    </ul>


    <!-- MyTabContent -->
    <div class="tab-content">
        <!-- Main settings -->
        <div class="tab-pane fade active in" id="general">
            <p>Main Settings</p>    
        </div><!-- Main settings end -->

        <!-- Contacts settings -->
        <div class="tab-pane fade in" id="contact">
            <p>Contacts Settings</p>            
        </div><!-- Contacts settings ends -->

        <!-- Knowledge settings -->
        <div class="tab-pane fade in" id="knowledge">
            <p>Kmowledgde Settings</p>
        </div><!-- Knowledge settings ends -->      

        <!-- Education settings -->
        <div class="tab-pane fade in" id="education">
            <p>Education Settings</p>
        </div><!-- Education settings ends -->

        <!-- Notifications settings -->       
        <div class="tab-pane fade in" id="notifications">   
           <p>Notifications settings</p> 
        </div><!-- Notifications settings --> 

    </div><!-- MyTabContent ends -->

【问题讨论】：

在我的电脑上运行正常...
账户设置？ > 通知？它有效吗？
在 Chrome 中对我来说很好
你刚刚在你的问题中说这不起作用。您能否更具体地解释一下确切的问题是什么？

标签： jquery twitter-bootstrap drop-down-menu tabs

【解决方案1】：

你的标记有很多错误..

通知指向“个人资料照片”
您拥有多个 active 选项卡和选项卡窗格
为什么到处都使用in 类？
没有“社交”的内容

一旦清理干净，它就可以正常工作了......

http://www.bootply.com/123488

【讨论】：