使用jQuery的多个手风琴 - 关闭问题

时间:2011-11-09 18:05:21

标签: jquery jquery-ui-accordion

我有一个页面,上面有许多手风琴。我希望通过点击任何一个手风琴(它们目前每个都只有一个项目)来关闭所有其他手风琴,以便我的图表保持不变。

请参阅以下页面: http://php.york.ac.uk/fs/hlth531/squelettes/js-graph/js-graph2.html

我的代码目前是:

$(function(){
var xxx  = '#pg_prog_com, #dis_com, #msc_pub, #msc_pub_int, #msc_hser, #msc_hsci, #msc_cancer, #msc_haem, #msc_cbt, #gard_prog, #lib_com, #pg_res, #dep_head, #vle_sup, #marketing, #marketing, #fin_dev, #phd_prog, #phd_prog, #phd_adm, #adm_asi, #adm_tutor';
$( xxx ).accordion({
    autoHeight: false,
    collapsible: true,
    active: false
    }); 
});

提前致谢,

纳迪亚

2 个答案:

答案 0 :(得分:1)

您必须绑定'accordionchange'事件,并切换其他手风琴。

$('.ui-accordion').bind('accordionchange', function(event, ui) {
    ui.newHeader // jQuery object, activated header
    ui.oldHeader // jQuery object, previous header
    ui.newContent // jQuery object, activated content
    ui.oldContent // jQuery object, previous content
});

手风琴的正常使用,是使用一个具有不同部分的手风琴,自动切换。

答案 1 :(得分:0)

以下是脚本部分的完整解决方案(显然HTML页面包含实际的手风琴)

<script>

$(function() {
    var xxx  = '#pg_prog_com, #dis_com, #msc_pub, #msc_pub_int, #msc_hser, #msc_hsci, #msc_cancer, #msc_haem, #msc_cbt, #gard_prog, #lib_com, #pg_res, #dep_head, #vle_sup, #marketing, #marketing, #fin_dev, #phd_prog, #phd_prog, #phd_adm, #adm_asi, #adm_tutor';

    function collapseAll(id) {
        //alert("calling collapseAll");
        $( xxx ).not('#'+id)
            .filter(":has(.ui-state-active)")
            .accordion("activate", -1);
        $(".ui-accordion-header").blur();
    }

    $( xxx ).accordion(
        autoHeight: false,
        collapsible: true,
        active: false
    }); 

    $( xxx ).accordion("option", "icons", {
        'header': 'ui-icon-carat-1-s', 'headerSelected': 'ui-icon-carat-1-n'
    });

    $(xxx).bind('accordionchangestart', function(event, ui) {
        collapseAll(this.id);    
    });
});
</script>