javascript - Jquery Collapse/Display Div - 关闭所有其他元素然后打开所选元素

Question

问题

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

现在，在元素之间单击时有时会显示多个 div。

理想

理想情况下，它会确保所有其他元素都已关闭，与单击的元素互斥。 (即单击带有“speaker1-expand”的 anchor 将关闭所有带有“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 fiddle

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/