twitter-bootstrap - 事件时切换 Twitter Bootstrap 按钮类

Question

在 twitter bootstrap 中，我正在寻找一种方法让按钮在不活动时成为默认颜色。一旦按钮处于事件状态，我想更改它的颜色。我查看了使用提供的 js 文件的方法。我最终写了一个小脚本来处理这个问题。

Answer 1

通过添加 class-toggle作为按钮的属性，等于按下按钮后您想要转到的内容并添加以下 jQuery，您将获得上述结果。

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() {

        if($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')){
            var btnGroup = $(this).parent('.btn-group');

            if(btnGroup.attr('data-toggle') == 'buttons-radio') {
                btnGroup.find('.btn').each(function() {
                    $(this).removeClass($(this).attr('class-toggle'));
                });
                $(this).addClass($(this).attr('class-toggle'));
            }

            if(btnGroup.attr('data-toggle') == 'buttons-checkbox' || $(this).attr('data-toggle') == 'button') {
                if($(this).hasClass('active')) {
                    $(this).removeClass($(this).attr('class-toggle'));
                } else {
                    $(this).addClass($(this).attr('class-toggle'));
                }
             }

          }


      });

然后按钮看起来像

<button class="btn" data-toggle="button" class-toggle="btn-inverse">Single Toggle</button>

如果您也想使用按钮组来执行此操作，则它的工作方式相同。只需添加 class-toggle到组中的每个按钮。

The jsfiddle

更新

我已经修改并创建了一个要点，以便在开始使用类(class)按钮时获得更好的响应。 Toggle Twitter Bootstrap Classes

更新

我进行了更改以修复单击事件单选按钮时出现的错误

Find it here