0

我正在使用 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 正在工作。

4

2 回答 2

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>
于 2012-04-09T15:38:04.157 回答
0

如果您将新的 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 访问的元素，所以这可能仍然不起作用，因为我还没有测试过它。

然而，这一点对我来说已经失去了意义，因为我没有看到花时间在一个看不见的元素上创建手风琴的意义？

于 2012-04-09T15:38:01.863 回答