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

时间:2015-06-23 18:31:27

标签: jquery html css twitter-bootstrap

我使用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功能的情况下单击其他按钮时,它不希望转为正常状态。

感谢您提供任何答案和帮助

1 个答案:

答案 0 :(得分:0)

嘿,如果你想显示第一个按钮已被按下,不需要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/