Jquery折叠/显示分区 - 关闭所有其他元素,然后打开所选项目

时间:2013-04-30 18:03:10

标签: javascript jquery html css

问题

我的脚本应隐藏所有带有“gallery-collapse”类的元素,然后根据点击的链接打开选择内容。

现在,点击项目时有时会显示多个div。

理想

理想情况下,它会确保所有其他元素都已关闭,与所单击的项目互斥。 (即单击带有“speaker1-expand”的锚点将关闭所有带有“gallery-collapse”类的元素,然后切换“speaker1-content”)

剧本:

<script>
j(".speaker1-content, .speaker2-content, .speaker3-content, .speaker4-content, .speaker5-content, .speaker6-content, .speaker7-content").hide();
j('.speaker1-expand').click(function(){
    j(".gallery-collapse").hide();
    j('.speaker1-content').slideToggle('slow');
});
j('.speaker2-expand').click(function(){
    j(".gallery-collapse").hide();
    j('.speaker2-content').slideToggle('slow');
});
j('.default-expand').click(function(){
    j(".gallery-collapse").hide();
    j('.speaker-default').slideToggle('slow');
});
</script>

JS小提琴

http://jsfiddle.net/2SCJe/10/

1 个答案:

答案 0 :(得分:1)

您可以将代码缩短为:

j("[class*='-content']").hide();

j('[class^="speaker"]').click(function(){
    //Find the right class to toggle
    var class = j(this).attr("class").split("-")[0];
    class += "-content"; // <---This is now the correct class to slide down

    //re hide everything
    j("[class*='-content']").hide(); // <--- re-hide everything
    j(".gallery-collapse").hide();

    //Show it
    j("." + class).slideToggle("slow");
});

小提琴演示概念:http://jsfiddle.net/Y6mHj/