点击显示隐藏的Div

Question

当我点击相应的div时，我想显示一个div，就像在Google的图像搜索结果中单击图像时一样。图像行被分割，一个新的区域被显示出来。我以我对javascript的最少知识获得了很大的进展：http://codepen.io/anon/pen/fKEgw

它的基本原理如下：

document.getElementById("a-section").addEventListener("click", function () {
document.getElementById("a-reveal").style.height = "300px";
document.getElementById("b-reveal").style.height = "0px";
document.getElementById("c-reveal").style.height = "0px";
document.getElementById("d-reveal").style.height = "0px";
document.getElementById("e-reveal").style.height = "0px";
document.getElementById("f-reveal").style.height = "0px";
document.getElementById("g-reveal").style.height = "0px";
document.getElementById("h-reveal").style.height = "0px";
});

我怎样才能得到类似的效果而不被迫设置一个高度值呢？有没有更好的方法来编码这种类型的东西，这样我就不会为移动视图做重复的div了？SHould我使用的不仅仅是javascript？

非常感谢您的帮助！

Answer 1

如果使用jquery，您可以简单地这样做，例如

$("#a-reveal").show();

和

$("#b-reveal").hide();

而不是改变高度。在普通的javascript中，这基本上是将'display‘css属性设置为'none’以隐藏它，然后再返回(默认为'block')。

编辑：

另外，如果您修改html，使div如下所示：

<div id="a-section" class="section" reveal="a-reveal">
....

<div id="a-reveal" class="reveal">

在event包含关联replace的ID的情况下，可以用以下方式替换所有单独的事件处理程序附加代码：

//attaches event to every div with class "section"
$(".section").click(function(){
    $(".reveal").hide();
    var thisRevealID = $(this).attr("reveal");
    $("#"+thisRevealID).show();
});

可能有一种获得适当显示div的更简洁的方法，而不是使用添加reveal属性，但其思想是使您能够根据单击的div确定您需要什么，而代码不知道具体单击了哪个div。

Answer 2

我同意，如果该项目是大型的，您可能会更好地使用JQuery，见这个时尚的优秀答案。如果您想继续使用普通的Javascript，当然可以稍微清理一下：

var reveal_func = function(section){
   var arr_a = new array("a-reveal","b-reveal","c-reveal");
   for (var i=0; i<var_a.length; i++){
      if (arr_a[i] === section){
          document.getElementById(arr_a[i]).style.height = "300px";
      }else{
         document.getElementById(arr_a[i]).style.height = "0px";
      }
   }

};

然后

document.getElementById("a-section").addEventListener("click", reveal_func("a-reveal"))
document.getElementById("b-section").addEventListener("click", reveal_func("b-reveal"))

如有需要。