Javascript 切换隐藏的div——我的脚本可以工作，但是有'；这一定是一种更好/更干净的方式

这就是我想做的：

这基本上是可行的，但我有两个顾虑：

我想为任何可见的div自动隐藏，如果另一个是点击

我确信有一种编写/压缩Javascript的方法比我这里的方法好得多。想法

$（.slidingDiv.info1”）.hide（）；
$（“.slidingDiv.info2”）.hide（）；
$（“.slidingDiv.info3”）.hide（）；
$（“.slidingDiv.info4”）.hide（）；
$（“.slidingDiv.info5”）.hide（）；
$（“.slidingDiv.info6”）.hide（）；
$（“.slidingDiv.info7”）.hide（）；
$（“.slidingDiv.info8”）.hide（）；
$（“.show_hide.info1”）.show（）；
$（“.show_hide.info2”）.show（）；
$（“.show_hide.info3”）.show（）；
$（“.show_hide.info4”）.show（）；
$（“.show_hide.info5”）.show（）；
$（“.show_hide.info6”）.show（）；
$（“.show_hide.info7”）.show（）；
$（“.show_hide.info8”）.show（）；
$（'.show_hide.info1'）。单击（函数（）{
$（“.slidingDiv.info1”）。切换（“幻灯片”）；
});
$（'.show_hide.info2'）。单击（函数（）{
$（“.slidingDiv.info2”）。切换（“幻灯片”）；
});
$（'.show_hide.info3'）。单击（函数（）{
$（“.slidingDiv.info3”）。切换（“幻灯片”）；
});
$（'.show_hide.info4'）。单击（函数（）{
$（“.slidingDiv.info4”）.toggle（“幻灯片”）；
});
$（'.show_hide.info5'）。单击（函数（）{
$（“.slidingDiv.info5”）。切换（“幻灯片”）；
});
$（'.show_hide.info6'）。单击（函数（）{
$（“.slidingDiv.info6”）。切换（“幻灯片”）；
});
$（'.show_hide.info7'）。单击（函数（）{
$（“.slidingDiv.info7”）。切换（“幻灯片”）；
});
$（'.show_hide.info8'）。单击（函数（）{
$（“.slidingDiv.info8”）。切换（“幻灯片”）；
});
.box{float:左；宽度：25%；高度：自动；}
.slidengdiv{text align:left；font:14px/24px arial；颜色：#222；背景色：#fff；填充：20px；页边距顶部：10px；宽度：33%；高度：80%；位置：绝对；z索引：160；顶部：20px；右侧：20px；-webkit框阴影：2px 3px 0px rgba（0,0,0.2）；-moz框阴影：2px 2px 3px 0px rgba（0,0,0.2）；框阴影：2px 2px rgba（0,0,0,0,0,0,0）;}
.show_hide{display:none；}

信息1


信息2


信息3


信息4


信息5


信息6


信息7


信息8


您可以将代码简化为：

$(".slidingDiv").hide();
$(".show_hide").show()
               .click(toggleSlidingDiv);

function toggleSlidingDiv() {
    var infoclass = $(this).attr('class').match(/\binfo\d+\b/);
    $(".slidingDiv."+infoclass).toggle("slide")
                               .siblings(".slidingDiv")
                               .hide("slide");
}

而不是
$（“.slidingDiv.info1”）.hide（）$（“.slidingDiv.info2”）.hide（）设置
$（“.slidingDiv”）.hide（）