15

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

4

3 回答 3

22

通过向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到组中的每个按钮即可。

jsfiddle

更新

我已经修改并创建了一个要点，以便在开始使用课程按钮时获得更好的响应。 Toggle Twitter 引导类

更新

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

在这里找到它

于 2012-06-29T18:32:32.147 回答
14

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

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

  1. data-active-class为按钮添加数据属性，

  2. 为所有类添加自定义 CSS（一个示例以提高可读性；颜色取自已经存在的类“primary”、“success”等）

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

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

带有完整 CSS 的 JSFiddle

编辑： 当使用 SASS 或 LESS 时，颜色可以/应该从 Bootstrap 已经定义的变量中使用......这解决了重复问题。

于 2015-04-23T20:57:20.783 回答
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;

真诚的另一个引导爱好者

于 2013-03-13T01:08:45.617 回答