Bootstrap nav-tabs下拉菜单多列

Question

我正在尝试为nav-tabs创建一个Bootstrap多列下拉菜单。使用下面的代码，我可以选择每个选项卡。当我切换到另一个选项卡时，我无法返回到之前的选项卡。看起来所有标签都保持活动状态。我该如何解决这个问题？

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style>
.dropdown-menu.multi-column {
        width: 400px;
}

.dropdown-menu.multi-column .dropdown-menu {
        display: block !important;
        position: static !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        min-width:100px;
}
</style>

    <ul class="nav nav-tabs" id="myTabs" role="tablist"> 
        <li role="presentation" class="active"><a href="#main" id="main-tab" role="tab" data-toggle="tab" aria-controls="main" aria-expanded="false">Summary Table</a></li> 
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">States</a>
            <div class="dropdown-menu multi-column">
                <div class="row">
                    <div class="col-md-6">
                        <ul class="dropdown-menu">
                            <li><a href="#Alabama" role="tab" id="Alabama-tab" data-toggle="tab">Alabama</a></li>
                            <li><a href="#Alaska" role="tab" id="Alaska-tab" data-toggle="tab">Alaska</a></li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="dropdown-menu">
                            <li><a href="#Maine" role="tab" id="Maine-tab" data-toggle="tab">Maine</a></li>
                            <li><a href="#Maryland" role="tab" id="Maryland-tab" data-toggle="tab">Maryland</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>

    <div class="tab-content" id="myTabContent" style="color:black"> 
        <div class="tab-pane fade in active" role="tabpanel" id="main" aria-labelledby="main-tab"> 
            <table class="table table-striped table-hover table-bordered table-responsive" id="rates">
                <thead>
                    <tr><th>State</th><th>Tax Rate</th></tr>
                </thead>
                <tbody>
                    <tr><td id="AL">Alabama</td><td id="AL_T">6.00%</td></tr>
                    <tr><td id="AK">Alaska</td><td id="AK_T">2.70%</td></tr>

                    <tr><td id="ME">Maine</td><td id="ME_T">3.00%</td></tr>
                    <tr><td id="MD">Maryland</td><td id="MD_T">3.00%</td></tr>

                </tbody>
            </table><br/>
        </div>

        <div class="tab-pane fade in" role="tabpanel" id="Alabama" aria-labelledby="Alabama-tab">
        <h5><span style="text-decoration: underline;">Alabama </span></h5>
        </div>

        <div class="tab-pane fade in" role="tabpanel" id="Alaska" aria-labelledby="Alaska-tab">
        <h5><span style="text-decoration: underline;">Alaska </span></h5>
        </div>

        <div class="tab-pane fade in" role="tabpanel" id="Maine" aria-labelledby="Maine-tab"> 
        <h5><span style="text-decoration: underline;">Maine </span></h5>
        </div> 

        <div class="tab-pane fade in" role="tabpanel" id="Maryland" aria-labelledby="Maryland-tab"> 
        <h5><span style="text-decoration: underline;">Maryland </span></h5>
        </div>

    </div>

Answer 1

将其添加到底部

 <script type="text/javascript">
        $(function() {

        var active = $('a[data-toggle="tab"]').parents('.active').length;
        var tabClicked = false;

        // Closes current active tab (toggle and pane):
        var close = function() {
            $('a[data-toggle="tab"]').parent().removeClass('active');
            $('.tab-pane.active').removeClass('active');
            active = null;
        }

        // Closing active tab when clicking on toggle:
        $('[data-toggle=tab]').click(function(){
            if ($(this).parent().hasClass('active')){
                $($(this).attr("href")).toggleClass('active');
                active = null;
            } else {
                tabClicked = true;
                active = this;
            }
        });

        // Closing active tab when clicking outside tab context (toggle and pane):
        $(document).on('click.bs.tab.data-api', function(event) {
            if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) {
                close();
            }

            tabClicked = false;
        });

        // Closing active tab on ESC key release:
        $(document).keyup(function(e){
            if(active && e.keyCode === 27) { // ESC
                close();
            }
        });
    });

        </script>

最后一个按钮之前的按钮＆lt; / div＆gt;

<a href="#" class="btn btn-primary">Close active tab</a>

我知道这不是最好的解决方案，但是工作和耐心都可以做得更好。

Answer 2

@Filipe Amaral的回答是这个问题所需要的95％。经过几次修改，它就像一个魅力。

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
            $('.dropdown-menu li').click (function(){
            $('.dropdown-menu li').removeClass('active')

        });
        $('#main-tab').click (function(){
            $('.dropdown-menu li').removeClass('active')

        });
    });
        $(function() {

        var active = $('a[data-toggle="tab"]').parents('.active').length;
        var tabClicked = false;

        // Closes current active tab (toggle and pane):
        var close = function() {
            $('a[data-toggle="tab"]').parent().removeClass('active');
            $('.tab-pane.active').removeClass('active');

            active = null;
        }


        // Closing active tab when clicking on toggle:
        $('[data-toggle=tab]').click(function(){
            if ($(this).parent().hasClass('active')){
                $($(this).attr("href")).toggleClass('active');

                active = null;
            } else {
                tabClicked = true;
                active = this;
            }
        });

        // Closing active tab when clicking outside tab context (toggle and pane):
        $(document).on('click.bs.tab.data-api', function(event) {
            if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) {
                close();
            }

            tabClicked = false;
        });

        // Closing active tab on ESC key release:
        $(document).keyup(function(e){
            if(active && e.keyCode === 27) { // ESC
                close();
            }
        });
    });

        </script>

<style>
.dropdown-menu.multi-column {
        width: 400px;
}

.dropdown-menu.multi-column .dropdown-menu {
        display: block !important;
        position: static !important;
        margin: 0 !important;
        border: none !important;
        box-shadow: none !important;
        min-width:100px;
}
</style>

    <ul class="nav nav-tabs" id="myTabs" role="tablist"> 
        <li role="presentation" class="active"><a href="#main" id="main-tab" role="tab" data-toggle="tab" aria-controls="main" aria-expanded="false">Summary Table</a></li> 
        <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">States</a>
            <div class="dropdown-menu multi-column">
                <div class="row">
                    <div class="col-md-6">
                        <ul class="dropdown-menu">
                            <li><a href="#Alabama" role="tab" id="Alabama-tab" data-toggle="tab">Alabama</a></li>
                            <li><a href="#Alaska" role="tab" id="Alaska-tab" data-toggle="tab">Alaska</a></li>
                        </ul>
                    </div>
                    <div class="col-md-6">
                        <ul class="dropdown-menu">
                            <li><a href="#Maine" role="tab" id="Maine-tab" data-toggle="tab">Maine</a></li>
                            <li><a href="#Maryland" role="tab" id="Maryland-tab" data-toggle="tab">Maryland</a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </li>
    </ul>

    <div class="tab-content" id="myTabContent" style="color:black"> 
        <div class="tab-pane fade in active" role="tabpanel" id="main" aria-labelledby="main-tab"> 
            <table class="table table-striped table-hover table-bordered table-responsive" id="rates">
                <thead>
                    <tr><th>State</th><th>Tax Rate</th></tr>
                </thead>
                <tbody>
                    <tr><td id="AL">Alabama</td><td id="AL_T">6.00%</td></tr>
                    <tr><td id="AK">Alaska</td><td id="AK_T">2.70%</td></tr>

                    <tr><td id="ME">Maine</td><td id="ME_T">3.00%</td></tr>
                    <tr><td id="MD">Maryland</td><td id="MD_T">3.00%</td></tr>

                </tbody>
            </table><br/>
        </div>

        <div class="tab-pane fade in" role="tabpanel" id="Alabama" aria-labelledby="Alabama-tab">
        <h5><span style="text-decoration: underline;">Alabama </span></h5>
        </div>

        <div class="tab-pane fade in" role="tabpanel" id="Alaska" aria-labelledby="Alaska-tab">
        <h5><span style="text-decoration: underline;">Alaska </span></h5>
        </div>

        <div class="tab-pane fade in" role="tabpanel" id="Maine" aria-labelledby="Maine-tab"> 
        <h5><span style="text-decoration: underline;">Maine </span></h5>
        </div> 

        <div class="tab-pane fade in" role="tabpanel" id="Maryland" aria-labelledby="Maryland-tab"> 
        <h5><span style="text-decoration: underline;">Maryland </span></h5>
        </div>

    </div>