Question

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

请参阅以下页面： 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
    }); 
});

提前致谢，

纳迪亚

Answer 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
});

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

Answer 2

以下是脚本部分的完整解决方案（显然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>

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

2 个答案: