当处于活动状态时，切换 Twitter Bootstrap 按钮类

Question

当处于活动状态时，切换 Twitter Bootstrap 按钮类

twitter-bootstrap

15

在Twitter Bootstrap中，我正在寻找一种方式，使得一个按钮在未被激活时可以使用默认颜色。一旦一个按钮被激活，我希望改变它的颜色。我研究了提供的js文件的实现方法，最终编写了一个小脚本来处理这个问题。

- bretterer

3个回答

14

我认为任何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;
}

Inactive button将像往常一样呈现，基于data-*属性的active将通过这个^^ CSS呈现。

JSFiddle带有完整CSS

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

- podvlada

@bretterer 请考虑一下这个答案是否满足您的需求 :) - podvlada

我有什么遗漏吗？在提供的fiddle中无法使其工作。 - Khrys

1

@Khrys 我在几台电脑上（甚至是我的手机）尝试了这个，没有问题，你能否提供更多有关出现问题的信息？只有一些html和css，没有javascript，也许外部资源有问题（缺少bootstrap.min.js和bootstrap.min.css）？ - podvlada

好奇怪...我在JSFiddle上尝试过，我确定它没有工作。但现在它可以了。感谢您的反馈。 - Khrys

嗨@bard，抱歉耽搁了。你所说的“single active”是什么意思？你是否指的是与示例中的“单切换”按钮不同的其他内容？它具有默认颜色和活动颜色，两者可以不同。 - podvlada

1

我投赞成票！这将在处理异步行为时防止出现错误... - Alexander Cherednichenko

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;

我是另一个Bootstrap爱好者

- kadifo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- bretterer · Accepted Answer

通过将 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 更新我修改并创建了一个 gist，以便在使用类启动按钮时获得更好的响应。切换 Twitter Bootstrap 类更新我做出了更改，以修复单击活动单选按钮时出现的错误。在此处查找