動態創建jQuery手風琴

我在創建使用javascript的jQuery手風琴時遇到了麻煩。它創建了Accodion標籤，並且還顯示了第一個元素的文本。它不顯示第二個元素文本，當你點擊它時，你永遠失去了第一個文本。動態創建jQuery手風琴

$("#tab-dock").append('<div id="daccordion">') 

$("#daccordion").append('<div id="dinfo"><h3><a href="#">Info</a></h3>') 
$("#dinfo").append('<div>Some info about this location.</div>') 
$("#daccordion").append('</div>') 

$("#daccordion").append('<div id="dmarket"><h3><a href="#">Market</a></h3>') 
$("#dmarket").append('<div>Market info would go here!</div>') 
$("#daccordion").append('</div>') 

$("#tab-dock").append('</div>') 

$("#daccordion").accordion({ header: "h3",navigation: true });

我這是正常創造了另一個Accodion並能正常工作。我只是不能讓他們匹配。有任何想法嗎？謝謝！

編輯：感謝所有的建議，從他們那裏學到了很多東西。問題原來是由於尺寸的原因，我不得不稱呼手風琴的大小來改變它的工作方式。

來源

2011-08-14 Mike Cage

你沒有正確使用追加 - 它不是要添加一行標記到現有的頁面，它的目的是追加完整的節點到現有的DOM。例如，$（'＃tab-dock'）。append（'

'）;重構你的代碼，看看是否有幫助！ – Tom

很高興知道，謝謝！ –

您不需要在append調用中關閉</div>標記。這可能是你麻煩的一部分。

我創建了這個fiddle - 似乎工作正常。也許我不明白這個問題。你能澄清一下嗎？實際上，我補充說的唯一不在你的問題中的是手風琴的持有者。我創建了這樣一個div：

<div id='tab-dock'></div>

這是您的持有人標記？

來源

2011-08-14 16:40:18

哇，小提琴很整齊。感謝那！我的問題使用手風琴的調整大小方法解決。 –

您應該刪除<div id="dinfo">標記（和結束標記）。手風琴具有以下結構：

<div> 
    <h3> 
    <div> 
    <h3> 
    <div> 
</div>

現在有大約每手風琴面板額外div（每個h3，div組合）。

來源

2011-08-14 16:40:39

問題是這兩個答案的組合。首先，你設置的結構並沒有真正與默認的jQuery UI構建一起工作。其次，「追加」需要填寫完整的項目（無論是「表格」還是「」，無論是作品）。像這樣的東西會做你想要什麼，我覺得http://jsfiddle.net/wdy8z/2/

$("#tab-dock").append('<div id="daccordion" />'); 

$("#daccordion").append('<h3><a href="#">Info</a></h3>') 
    .append('<div id="dinfo">Some info about this location.</div>') 
    .append('<h3><a href="#">Market</a></h3>') 
    .append('<div id="dmarket">Market info would go here!</div>'); 

$("#daccordion").accordion({ header: "h3",navigation: true });

來源

2011-08-14 17:00:43 Sinetheta

感謝所有的建議，學到了很多剛剛從他們。問題原來是由於尺寸，我不得不稱呼手風琴的調整大小

來源

2011-08-15 17:23:35

動態創建jQuery手風琴

回答

相關問題