Jquery Collapse/Display Divs - 关闭所有其他元素然后打开所选项目

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

Fiddle 演示概念：http://jsfiddle.net/Y6mHj/