jQuery Accordion 来自 $("div id=\"accordion\">答案

【问题标题】：jQuery Accordion from $("div id=\"accordion\">jQuery Accordion 来自 $("div id=\"accordion\">
【发布时间】：2012-04-09 15:31:15
【问题描述】：

我正在使用 GWTQuery 和 GWTQuery-UI，但我认为 JQuery-UI 的工作方式相同。

如何在不在 HTML 文档中定义手风琴的情况下创建手风琴？

例如

    $("<div id=\"accordion\">   <h3><a href=\"#\">Section 1</a></h3><div><p>Mauris.</p></div><h3><a href=\"#\">Section 2</a></h3><div><p>Sed non urna.</p></div><h3><a href=\"#\">Section 3</a></h3><div><p>Nam enim risus.</p><ul><li>List item one</li><li>List item two</li>li>List item three</li></ul></div><h3><a href=\"#\">Section 4</a></h3><div><p>Cras dictum.</p><p>Suspendisse</p></div></div>");
    $("#accordion").as(Ui).accordion();

这根本不会显示任何文本。如果我将它附加到面板，我只会得到带有部分的文本，但没有手风琴。

谢谢

编辑：在 HTML 文件中创建一个空的 div 手风琴，附加字符串

$("#accordion")
            .append("<h3><a href=\"#\">Section 1</a></h3><div><p>Section 1 text here.</p></div>");
    $("#accordion")
            .append("<h3><a href=\"#\">Section 2</a></h3><div><p>Section 2 text here.</p></div>");
    $(absolutePanel_1.getElement()).append(
            $("#accordion").as(Ui).accordion());

并将其添加到 gwt-panel 正在工作。

【问题讨论】：

标签： jquery jquery-ui gwtquery

【解决方案1】：

您可以在 JavaScript 中创建手风琴，但您需要将其附加到元素上才能显示在页面上。

请参阅此jsFiddle 进行演示。代码如下：

<script type="text/javascript">
    $(function(){

        //get the accordion container
        var $accordion = $("#accordion");    

        //append elements to the accordion   
        $accordion.append("<h3><a href=\"#\">Section 1</a></h3><div><p>Section 1 text here.</p></div>");
        $accordion.append("<h3><a href=\"#\">Section 2</a></h3><div><p>Section 2 text here.</p></div>");

        //turn it into an accordion
        $accordion.accordion();          

    });
</script>
<div id="accordion"></div>

【讨论】：

感谢您的帮助！我正在接近它。现在看起来像this。这个问题可以使用css（高度）解决还是在其他地方？再次感谢
看起来像是 CSS 问题。尝试将clear:both 添加到h3 元素。请参阅我修改后的答案。
@Beig：另外，在手风琴的上下文中，确保h3 元素的显示属性设置为block
再次感谢。我正在使用来自jQueryUI 的 .css 文件。现在它看起来像this。我无法打开其他“选项卡”，甚至在单击第二个选项卡后也无法重新打开第一个选项卡。正常的手风琴工作正常（HTML 文件中的 div），也许我可以找到出路，所以当手风琴尚未创建时它不会显示。
你能创建一个 jsFiddle 吗？这样我就可以看到你在做什么，并在我修复它后发布一个更新的示例。

【解决方案2】：

如果您将新的 jQuery 对象设置为变量，您将能够在其上调用 accordion() 方法，如下所示：

var $div = $("<div id=\"accordion\"><h3><a href=\"#\">Section 1</a></h3><div><p>Mauris.</p></div><h3><a href=\"#\">Section 2</a></h3><div><p>Sed non urna.</p></div><h3><a href=\"#\">Section 3</a></h3><div><p>Nam enim risus.</p><ul><li>List item one</li><li>List item two</li>li>List item three</li></ul></div><h3><a href=\"#\">Section 4</a></h3><div><p>Cras dictum.</p><p>Suspendisse</p></div></div>");
$div.accordion();

但是，accordion() 使用的某些函数可能依赖于可通过 DOM 访问的元素，因此这可能仍然无法正常工作，因为我尚未对其进行测试。

然而，我没有意识到这一点，因为我没有看到花时间在看不见的元素上创建手风琴的意义？

【讨论】：