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

Question

问题

我的脚本应隐藏所有带有“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/

Answer 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/