动态创建jQuery手风琴

我在使用javascript创建jQuery手风琴时遇到问题。它可以创建Accodion标签，并显示第一个元素的文本。它不显示第二个元素文本，当您单击它时，第一个元素文本也将永远丢失

$("#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 });

$（“#选项卡驳接”）。附加（“”）
$（“#dacordion”）。附加（“”）
$（“#dinfo”）.append（'有关此位置的一些信息'）
$（“#dacordion”）。附加（“”）
$（“#dacordion”）。附加（“”）
$（“#dmarket”）.append（'市场信息将显示在此处！'）
$（“#dacordion”）。附加（“”）
$（“#选项卡停靠”）。附加（“”）
$（“#dacordion”）.accordion（{标题：“h3”，导航：true}）；

我有另一个正常创建的Accodion，它运行良好。我只是不能让他们匹配。有什么想法吗？谢谢

---

编辑：感谢所有的建议，从中我们学到了很多。问题出在尺寸上，我不得不调用手风琴的resize来让它工作

在

追加

调用中不需要关闭

标记。那可能是你麻烦的一部分

我创造了这个-似乎工作得很好。也许我不明白这个问题。你能澄清一下吗？事实上，我补充的唯一一件事不在你的问题中是手风琴的支架。我创建了一个

div

，如下所示：

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

---

这是您的持有者标记吗？

您应该删除

标记（和结束标记）。手风琴具有以下结构：

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

---

现在，每个手风琴面板（每个

h3

，

div

组合）周围都有一个额外的

div

。

问题是这两个答案的组合。首先，您设置的结构与默认的jQueryUI构建并不完全一致。第二，“附加”需要输入完整的项目（以“形式”或“形式”，两者都有效）。我想这样的东西可以满足你的要求

$（“#选项卡驳接”）.append（“”）；
$（“#dacordion”）。附加（“”）
.append（'有关此位置的一些信息'）
.append（“”）
.append（'市场信息将显示在此处！'）；
$（“#dacordion”）.accordion（{标题：“h3”，导航：true}）；

感谢所有的建议，从中我们学到了很多。问题是由于大小，我不得不调用Accordian的resize

您没有正确使用append-它不是要向现有页面添加一行标记，而是要向现有DOM添加完整节点。例如，$（'#tab dock'）.append（''）；重构你的代码，看看这是否有帮助！哇，小提琴真漂亮。谢谢你！我的问题用手风琴的调整大小方法解决了。

$("#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 });