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

<强>更新

我已经修改并创建了一个要点，以便在启动按钮时获得更好的响应。 Toggle Twitter Bootstrap Classes

<强>更新

我已做出更改以修复单击活动单选按钮时出现的错误

Find it here

Answer 2

我不认为，任何JS都是必要的。我相信这可以通过CSS和data属性完成。

是的，它涉及一些 CSS重复，但仍然比有时出现故障的javascript更好。

将数据属性data-active-class添加到按钮

为所有类添加自定义CSS（示例为可读性;颜色取自已存在的类“primary”，“success”等）

.btn.active[data-active-class="primary"] { color: #fff; background-color: #286090; border-color: #204d74; }

非活动按钮将照常渲染，基于data-*属性的活动将由此^^ CSS呈现。

JSFiddle with complete CSS

修改当使用SASS或LESS时，可以/应该使用Bootstrap已定义的变量来解决重复问题。

Answer 3

我已经编辑了你的代码。如果你点击代码中的活动状态，那一切都会变得混乱。我添加了一个if语句来防止这种情况发生。只是一个贡献，如果你需要修复。很好的使用代码。

$('.btn-group > .btn, .btn[data-toggle="button"]').click(function() {
var buttonClasses = ['btn-primary','btn-danger','btn-warning','btn-success','btn-info','btn-inverse'];
var $this = $(this);

    if ($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')) {

        var btnGroup = $this.parent('.btn-group');
        var btnToggleClass = $this.attr('class-toggle');
        var btnCurrentClass = $this.hasAnyClass(buttonClasses);

        if(btnToggleClass!='false'&&btnToggleClass!='btn') {

            if (btnGroup.attr('data-toggle') == 'buttons-radio') {
                var activeButton = btnGroup.find('.btn.active');
                var activeBtnClass = activeButton.hasAnyClass(buttonClasses);

                    activeButton.removeClass(activeBtnClass).addClass(activeButton.attr('class-toggle')).attr('class-toggle',activeBtnClass);               
                    $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass);

            }

            if (btnGroup.attr('data-toggle') == 'buttons-checkbox' || $this.attr('data-toggle') == 'button') {
                $this.removeClass(btnCurrentClass).addClass(btnToggleClass).attr('class-toggle',btnCurrentClass);
            }

        }


    }



});    

$.fn.hasAnyClass = function(classesToCheck) {
    for (var i = 0; i < classesToCheck.length; i++) {
        if (this.hasClass(classesToCheck[i])) {
            return classesToCheck[i];
        }
    }
    return false;

真诚的另一个引导爱好者

激活时切换Twitter Bootstrap按钮类

3 个答案: