jQuery UI手风琴不适用于HTML模板

Question

I am struggled with accordion UI. 我在手风琴UI方面感到困惑。 It works with static test content like this: 它适用于如下静态测试内容：

<h3>Section 1</h3>
    <div>
        <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.</p>
    </div>
<h3>Section 2</h3>
    <div>
        <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
suscipit faucibus urna.</p>
    </div>

However, I generate content using template: 但是，我使用模板生成内容：

<h3 class="rightarticle_ad">
    ${title}
</h3>
<div class="rightarticle">
    <ul>
    {{each subitems}}
    <li>
        <a href="${url}">${title}</a>
            {{if description}}
            <div class="description">${description}</div>
            {{/if}}
    </li>
    {{/each}}
    </ul>
</div>

My JavaScript/jQuery code is: 我的JavaScript / jQuery代码是：

$.get('/templates/nav-cats.html', function(templates) {
    $.tmpl(templates, navigationJson).appendTo("#navaccordion").accordion();
});

So the issue is that it doesn't apply collapse state, all items are always open. 因此，问题在于它不应用折叠状态，所有项目始终处于打开状态。 I figured out if I wrap template code in paragraph element accordion works> it works in strange way: all items are opened, it has two additional buttons each reponsible only for open or hide content and the header lays below one of them. 我想出了如果我将模板代码包装在段落元素中，手风琴工作原理>它以一种奇怪的方式工作：所有项目均被打开，它具有两个附加按钮，每个按钮仅负责打开或隐藏内容，并且标题位于其中之一的下方。

Could you suggest what I am doing wrong? 你能建议我做错了吗？ Seems like it would be some kind of novice issue. 看来这将是某种新手问题。

UPDATE: 更新：

<head></head>
<body>
    <div id="header"></div>
    <div class="content">
        <div id="dialog" title="Dialog Title"></div>
        <div id="articles">
            <div id="left"></div>
            <div id="right">
                <div id="searchformcontainer"></div>
                <div id="rightmenu">
                    <div id="navaccordion">
                        <h3 class="rightarticle_ad ui-accordion ui-widget ui-helper-reset" role="tablist">

                                 Categories 

                        </h3>
                        <div class="rightarticle ui-accordion ui-widget ui-helper-reset" role="tablist">
                            <ul id="ui-accordion-3-header-0" class="ui-accordion-header ui-helper-reset ui-state-default ui-acco…ader-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" aria-controls="ui-accordion-3-panel-0" aria-selected="true" aria-expanded="true" tabindex="0">
                                <span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"></span>
                                <li>
                                    <a href="#">

                                        Client-side development

                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        Java

                                    </a>
                                </li>
                                <li>
                                    <a href="#">

                                        .Net

                                    </a>
                                </li>
                                <li></li>
                            </ul>
                        </div>
                        <h3 class="rightarticle_ad ui-accordion ui-widget ui-helper-reset" role="tablist">

                                 Advertisment 

                        </h3>
                        <div class="rightarticle ui-accordion ui-widget ui-helper-reset" role="tablist">
                            <ul id="ui-accordion-6-header-0" class="ui-accordion-header ui-helper-reset ui-state-default ui-acco…ader-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" aria-controls="ui-accordion-6-panel-0" aria-selected="true" aria-expanded="true" tabindex="0"></ul>
                        </div>
                        <h3 class="rightarticle_ad ui-accordion ui-widget ui-helper-reset" role="tablist"></h3>
                        <div class="rightarticle ui-accordion ui-widget ui-helper-reset" role="tablist"></div>
                        <h3 class="rightarticle_ad ui-accordion ui-widget ui-helper-reset" role="tablist"></h3>
                        <div class="rightarticle ui-accordion ui-widget ui-helper-reset" role="tablist"></div>
                    </div>
                </div>
            </div>
        </div>
        <div id="links"></div>
    </div>
    <div id="additional"></div>
    <div id="whiteline"></div>
    <div id="footer"></div>
    <ul id="ui-id-1" class="ui-autocomplete ui-front ui-menu ui-widget ui-widget-content ui-corner-all" tabindex="0" style="display: none;"></ul>
</body>

Answer 1

Try using the following to make your accordion: 尝试使用以下方法制作手风琴：

$.get('/templates/nav-cats.html', function(templates) {
    $.tmpl(templates, navigationJson).appendTo("#navaccordion");
    $("#navaccordion").accordion();
});

jQuery UI手风琴不适用于HTML模板

问题描述

UPDATE: 更新：

1 个解决方案

解决方案1
2 已采纳 2014-08-15 09:00:39

jQuery UI手风琴不适用于HTML模板

问题描述

UPDATE: 更新：

1 个解决方案

解决方案1 2 已采纳 2014-08-15 09:00:39

解决方案1
2 已采纳 2014-08-15 09:00:39