Javascript手風琴如何運作？

Question

我想創建自己的手風琴組件，而不使用任何AJAX工具包，主要用於學習目的。我不知道該從哪裏開始。我假設我將首先爲手風琴中的每個部分創建div。也許每個div都會包含一個標題，這將是選擇將手風琴移動到該部分的實際按鈕。我不確定一旦選擇了手風琴的部分按鈕，就採取正確的方法。我會使用z順序，以便每個部分具有更高的z順序嗎？任何幫助表示讚賞。

感謝

Answer 1

我強烈推薦拿起一本書，比如John Resig的Pro JavaScript techniques，它會給你一些關於如何建立自己的客戶端解決方案的想法和初步想法。

本質上講，你將不得不充當報頭中的元件，例如<h1>或<div>下，你將有一個與<div>的display: none;初始樣式。在標題的點擊事件上設置一個事件處理程序，將下面div的樣式更改爲display: block，並確保隱藏任何其他內容<div>（例如，通過在每個內容<div>上使用CSS類來執行此操作）。

我會留下流暢的動畫給你，作爲練習如何完成它。作爲提示，我會建議您查看一下像jQuery這樣的JavaScript庫如何處理動畫，方法是查看源代碼。

Answer 2

見this question，你會發現我的答案中包含的基本工作原理，應該讓你開始演示。這是幾分鐘前才問的！

它使用jQuery。

Answer 3

的最佳方式來訂購吧會是這樣

<div id="accordion"> 
<h3 class="accordion title">Title</h3> 
<div class="accordion section"> 
    Section Content 
</div> 

<h3 class="accordion title">Title 2</h3> 
<div class="accordion section"> 
    Section Content 
</div> 

<h3 class="accordion title">Title 3</h3> 
<div class="accordion section"> 
    Section Content 
</div> 

<h3 class="accordion title">Title 4</h3> 
<div class="accordion section"> 
    Section Content 
</div> 
</div> 

你想避免z-order完全是因爲它是一個兼容性的混亂。相反，您可以將手風琴的名稱作爲您打開手風琴的單擊。默認情況下，您需要將所有手風琴部分<div>設置爲visibility:hidden;，然後在單擊其中一個手風琴部分時，更改其可見性並隱藏所有其他手風琴。如果您希望它可以與任意數量的手風琴部分一起工作，您應該對每個<h3 class="accordion title">和每個<div class="accordion section">進行計數，並將它們組合成一個數組。當標題被點擊時，顯示它對應的div。或者，你可以給每個人一個單獨的ID，但第一種方式會更有用。

其實，它可能是display:none;而不是visibility:hidden;，我會試試這兩個。

另外值得一提的是，動畫通常是通過改變div的大小來處理，所以如果你隱藏了一個部分，你會使高度越來越小，直到它達到0並且被隱藏。