Question

我在使用javascript创建jQuery Accordion时遇到问题。它可以很好地创建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 });

我有另一个正常创建的Accodion，它工作正常。我只是不能让他们匹配。有任何想法吗？谢谢！

编辑：感谢所有的建议，从他们那里学到了很多东西。问题原因是由于尺寸问题，我不得不调用Accordion的调整大小来使其正常工作。

Answer 1

您的</div>来电中不需要关闭append代码。这可能是你麻烦的一部分。

我创建了这个fiddle - 似乎工作正常。也许我不明白这个问题。你能澄清一下吗？实际上，我添加的唯一不在你问题中的是手风琴的持有者。我创建了div，如此：

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

这是你的持有人标记吗？

Answer 2

您应该删除<div id="dinfo">标记（和结束标记）。手风琴具有以下结构：

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

现在每个手风琴小组（每个div，h3组合）都有一个额外的div。

Answer 3

问题是这两个答案的组合。首先，您设置的结构与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 });

Answer 4

感谢所有的建议，从他们那里学到了很多东西。问题原因在于尺寸，我不得不调用Accordian的调整大小

动态创建jQuery手风琴

4 个答案: