打开多个手风琴选项卡

时间:2013-02-06 08:11:11

标签: jquery jquery-ui css3 accordion

我已经实现了手风琴内容标签。目前,它允许一次打开一个菜单。我还需要同时打开其他标签。

这是我的代码

(function(jQuery){
     jQuery.fn.extend({  
         accordion: function() {       
            return this.each(function() {

                var $ul = $(this);

                if($ul.data('accordiated'))
                    return false;

                $.each($ul.find('ul, li>div'), function(){
                    $(this).data('accordiated', true);
                    $(this).hide();
                });

                $.each($ul.find('a'), function(){
                    $(this).click(function(e){
                        activate(this);
                        return void(0);
                    });
                });

                var active = (location.hash)?$(this).find('a[href=' + location.hash + ']')[0]:'';

                if(active){
                    activate(active, 'toggle');
                    $(active).parents().show();
                }

                function activate(el,effect){
                    $(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
                    $(el).siblings('ul, div').slideToggle("slow");((!effect)?'fast':null);
                }

            });
        } 
    }); 
        $('ul').accordion();
             $(".info").find("a").click(function(){
              var trid = $(this).parent().attr("idcust");                
              var trdata = $(this).parent().attr("custdata");
            // Hide all content divs and show only the one related to the click
             $("#"+trid).show().children().not(trdata).hide();
            $(trdata).toggle();
        });
})(jQuery);

DEMO HERE

2 个答案:

答案 0 :(得分:1)

首先,我想说CSS中有很多垃圾代码。 JS。写得像这样:

<强> JS

$('.accordion a').click(function(){
    $('.accordion div').slideToggle("slow");;
});

<强> CSS

.accordion div {  background: #fff;overflow:hidden;display:none;}

选中此http://jsfiddle.net/RVJQN/1/

答案 1 :(得分:0)

手风琴不支持多个打开的标签页(无需设置API属性),结帐 - http://docs.jquery.com/UI/Accordion