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？我应该使用除了javascript以外的东西吗？

非常感谢你的帮助！

Answer 1

如果你使用jquery，你可以简单地做，例如

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

和

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

而不是改变高度。在简单的JavaScript中，这基本上是设置＆＃39;显示＆＃39; css属性为＆＃39;无＆＃39;隐藏它然后回来（默认是＆＃39;阻止＆＃39;）。

编辑：

另外，如果你修改html以便div是这样的：

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

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

其中reveal包含关联的揭示div的ID，您可以使用以下内容替换所有单独的事件处理程序附加代码：

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

可能有一种更简洁的方法来获取相应的揭示div而不是诉诸添加揭示属性，但想法是这样做，这样你就可以根据点击的div确定你需要什么，而代码不知道究竟哪个div点击了。

Answer 2

我同意，如果项目很大，你可能会更好地使用JQuery，请参阅thogue的优秀答案。如果你想使用普通的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"))

根据需要。

单击显示隐藏的Div

2 个答案: