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