javascript - 单击显示隐藏的 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";
});

如何在不强制设置高度值的情况下获得类似的效果？有没有更好的方法来编写此类代码，这样我就不会为移动 View 制作重复的 div？我应该使用 javascript 以外的东西吗？

非常感谢您的帮助!

Answer 1

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

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

和

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

而不是改变高度。在普通的 javascript 中，这基本上是将“显示”css 属性设置为“无”以隐藏它然后返回(默认为“ block ”)。

编辑:

还有，如果你修改html，让div变成这样:

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

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

其中 reveal 包含关联的 reveal div 的 ID，您可以将所有单独的事件处理程序附加代码替换为以下代码:

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

可能有一种比添加 reveal 属性更简洁的方法来获得适当的显示 div，但我们的想法是这样做，这样您就可以根据点击的 div 确定您需要什么，而无需代码确切知道哪个 div被点击了。