html - 不折叠 bootstrap 的手风琴

Question

我有一个jsfiddle手风琴jsfiddle

它有左右两列，每当我尝试折叠右手风琴时，如果它保持打开并尝试单击左手风琴，那么右手风琴应该关闭，这怎么可能？

Answer 1

试试js

http://jsfiddle.net/BhBHf/3/

$(document).ready(function(){
    $('.accordion .accordion-toggle').each(function(){
        $(this).html('<span class="plus">+</span>'+$(this).text());
    });
    $('.accordion a').on('click',function(){
        if($(this).children('.plus').text()==='+'){
            $(this).children('.plus').text('-');
            $(this).css({'color':'red'});
        }
        else{
            $(this).children('.plus').text('+');
            $(this).css({'color':'#666'});
        }
         $('.accordion').on('hide', function () {
        $('[href="#'+$(this).attr('id')+'"]').addClass('accordion');
    });
    });

});

Answer 2

尝试这个：

http://jsfiddle.net/BhBHf/4/

$(document).ready(function () {
    $('.accordion .accordion-toggle').each(function () {
        $(this).html('<span class="plus">+</span>' + $(this).text());
    });
    $('.accordion a').on('click', function () {
        if ($(this).children('.plus').text() === '+') {
            $(this).children('.plus').text('-');
            $(this).css({
                'color': 'red'
            });
            $('.accordion a').not(this).children('.plus').text('+');
            $('.accordion a').not(this).css({
                'color': '#666'
            });
            $('.in').collapse("hide").removeClass("in");
        } else {
            $(this).children('.plus').text('+');
            $(this).css({
                'color': '#666'
            });

        }
    });
});

我还用 HTML 代码重命名了你的两个手风琴。