我有一个页面,上面有许多手风琴。我希望通过点击任何一个手风琴(它们目前每个都只有一个项目)来关闭所有其他手风琴,以便我的图表保持不变。
请参阅以下页面: 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
});
});
提前致谢,
纳迪亚
答案 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>