没有折叠bootstrap的手风琴

时间:2013-06-27 08:35:48

标签: html css twitter-bootstrap accordion

手风琴jsfiddle

我有一个jsfiddle

每当我试图折叠右手风琴时左右两个琴柱,如果它仍然打开并试图点击左手风琴,那么右手风琴应该关闭,它怎么可能?

2 个答案:

答案 0 :(得分:0)

尝试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');
    });
    });

});

答案 1 :(得分:0)

试试这个:

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代码重命名了你的两个手风琴。