twitter-bootstrap – 活动时切换Twitter Bootstrap按钮类

发布时间：2020-12-18 00:14:30 所属栏目：安全来源：网络整理

导读：在twitter bootstrap中,我一直在寻找一种方法,允许按钮在未激活时成为默认颜色.一旦按钮处于活动状态,我想改变它的颜色.我查看了使用提供的js文件执行此操作的方法.我最后写了一个小脚本来处理这个问题. 解决方法通过将类切换作为属性添加到按钮等于按下按

在twitter bootstrap中,我一直在寻找一种方法,允许按钮在未激活时成为默认颜色.一旦按钮处于活动状态,我想改变它的颜色.我查看了使用提供的js文件执行此操作的方法.我最后写了一个小脚本来处理这个问题.

解决方法

通过将类切换作为属性添加到按钮等于按下按钮时要进行的操作并添加以下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>

如果你想用一个按钮组来做它,它的工作方式也是一样的.只需将类切换添加到组中的每个按钮即可.

The jsfiddle

UPDATE

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

UPDATE

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

Find it here

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!