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

Question

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

    <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 你可以简单地向第一个元素添加一个类 active

<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>

检查下面的 fiddle

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