jquery - bootstrap JS 和 data-toggle="buttons-checkbox" 显示 div

Question

我正在尝试使用引导程序切换 div (data-toggle="buttons-checkbox") 查看我的代码：

<div class="btn-group d1" data-toggle="buttons-checkbox">
    <button type="button" class="btn btn-link ra">A</button>
    <button type="button" class="btn btn-link rb">B</button>
    <button type="button" class="btn btn-link rc">C</button>
</div>

<div class="myDiv rad">AAAAAAAAAAAA<br />AAAAAAAAAAAA</div>
<div class="myDiv rbd">BBBBBBBBBBBB<br />BBBBBBBBBBBB</div>
<div class="myDiv rcd">CCCCCCCCCCCC<br />CCCCCCCCCCCC</div>

$(".ra").on("click",function(){
    $('.myDiv').toggle();
    $(".rad").toggle();
});

$(".rb").on("click",function(){
    $('.myDiv').toggle();
    $(".rbd").toggle();
});

$(".rc").on("click",function(){
    $('.myDiv').toggle();
    $(".rcd").toggle();
});

请参阅工作链接jsfiddle

知道如何根据选择显示它吗？像同时 2 个 div 吗？

Answer 1

遍历按钮，仅找到“活动”并显示与“活动”元素相对应的元素，其他元素则隐藏。如果没有“活动”显示一切。

http://jsfiddle.net/mattydsw/KZBNh/3/

var buttons = $(".btn-link");
buttons.on("click",function(){
    $(this).toggleClass('sel');
    buttons.each(function(i,e) {
        var $this = $(e);
        var current = $("."+($this.attr('class').split(' '))[2]+"d");
        if($this.hasClass('sel')) {
            current.show();
        } else {
            current.hide();
        }
    });
    if($('.sel').length==0) {
        $('.myDiv').show();
    }
});