單擊顯示隱藏的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？ 我應該使用除了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">

如果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"))

如所須。