在點擊時顯示隱藏的Divs

當我點擊相應的div時，我正在尋找揭示div，就像您點擊Google圖片搜索結果中的圖片一樣。圖像的行被拆分，並且顯示新的區域。我買了我的javascript這裏最小的知識很遠：http://codepen.io/anon/pen/fKEgw 在點擊時顯示隱藏的Divs

它的基本工作原理是這樣：

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以外的東西嗎？

非常感謝您的幫助！

來源

2014-04-23 Power Design

如果您能夠使用'jquery'，您可以簡單地[toogle]（http://api.jquery.com/toggle/） –

如果使用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">

，其中顯示包含關聯揭示div的ID，你可以更換所有的單獨的事件處理器連接代碼如下：

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

可能有一個更清潔的方式來獲得相應的顯示格，而不是訴諸於添加顯示屬性，但這個想法是爲了讓你可以根據點擊的div來確定你需要什麼，而不需要知道哪個div被點擊的確切代碼。

來源

2014-04-23 19:51:54 thogue

非常感謝！這看起來應該是訣竅。 –

我同意，如果項目很大，那麼使用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"))

需要。

來源

2014-04-23 19:55:05 carlosdc

在點擊時顯示隱藏的Divs

回答

相關問題