btn-group-justified 中的预按按钮不想返回正常状态

Question

我有以下使用 bootrap 的合理按钮组

    <div class="row" >
     <div class="col-lg-12">
         <div class="btn-group btn-group-justified" role="group" aria-label="...">
             <div class="btn-group" role="group" aria-label="label" data-toggle="buttons">
                 <button type="button" class="btn btn-default btn-sm">All</button>
             </div>
             <div class="btn-group" role="group" aria-label="label">
                 <button type="button" class="btn btn-default btn-sm" id="audio" >Audiobooks</button>
             </div>
             <div class="btn-group" role="group" aria-label="label">
                 <button type="button" class="btn btn-default btn-sm">E-books</button>
             </div>
             <div class="btn-group" role="group" aria-label="label">
                 <button type="button" class="btn btn-default btn-sm">New</button>
             </div>
             <div class="btn-group" role="group" aria-label="label">
                 <button type="button" class="btn btn-default btn-sm">Premiers</button>
             </div>
             <div class="btn-group" role="group" aria-label="label">
                 <button type="button" class="btn btn-default btn-sm">Super deals</button>
             </div>
         </div>
     </div>
 </div>

这是我的 jquery 函数：

$( document ).ready(function() {
    $(".btn").first().button("toggle");
});

我使用了来自Pre-toggle a button in Bootstrap's btn-group? 的解决方案，但它对我来说效果不佳。加载文档时，该按钮处于活动状态，但它不想在没有我的 jquery 功能的情况下默认单击其他按钮时变为正常状态。

感谢您的任何回答和帮助

Answer 1

嘿，如果你想显示第一个按钮已经被按下，不需要 jquery，你可以简单地将一个活动类添加到第一个元素

<div class="btn-group" role="group" aria-label="label" data-toggle="buttons">
                 <button type="button" class="active btn btn-default btn-sm">All</button>
             </div>

检查下面的小提琴

http://jsfiddle.net/Siddharth_Pandey/nak43d7x/