javascript - Bootstrap .tab ('show' ) 还扩展了 Group Button

Question

谁能告诉我为什么下面的 JavaScript 代码在执行时会展开 Bootstrap 选项卡容器内的 Bootstrap 按钮组:

// Javascript to enable link to tab
var url = document.location.toString();
if (url.match('#')) {
    $('.nav-tabs a[href=#' + url.split('#')[1] + ']').tab('show');
}

HTML 如下所示:

<div class="tabs-color-profile">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab" href="#myProfile">My Profile</a></li>
        <li><a data-toggle="tab" href="#partner">Partner</a></li>
        <li><a data-toggle="tab" href="#dependants">Dependants</a></li>
    </ul>
</div>

     <div class="tab-pane fade" id="dependants">

        <div class="row">
            <div class="col-md-12">
                <h3>Dependants</h3>

                <div class="btn-toolbar">
                    <div class="btn-group">
                        <div class="btn-group open">
                            <button data-toggle="dropdown" class="btn btn-default dropdown-toggle" type="button">
                                <span class="glyphicon glyphicon-plus"></span>
                                Add Dependant
                                <span class="caret"></span>
                            </button>
                            <ul class="dropdown-menu">
                                <li><a href="#">My Dependant</a></li>
                                <li><a href="#">Partner's Dependant</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
             </div>
         </div>
      </div>

其他选项卡 HTML 已被省略，以使其更加简洁。

注意:我使用 JS 根据位置哈希中的名称自动加载正确的选项卡。

Answer 1

是的。

改变

<div class="btn-group open">

至

<div class="btn-group">