激活时切换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到组中的每个按钮即可.

jsfiddle

UPDATE

我已经修改并创建了一个要点,以便在启动按钮时获得更好的响应. 切换Twitter Bootstrap类

UPDATE

我做了一个更改来修复单击活动单选按钮时出现的错误

在这里找到它

Answer 2

我不认为,任何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渲染.

JSFiddle完整的CSS

编辑: 使用SASS或LESS时,可以/应该使用Bootstrap已经定义的变量来解决重复问题.