我希望在单击相应的 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 以外的东西吗?
非常感谢您的帮助!
最佳答案
如果你使用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被点击了。
关于javascript - 单击显示隐藏的 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23253754/