Question

我对手风琴UI很挣扎。它适用于静态测试内容，如下所示：

<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>

但是，我使用模板生成内容：

<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>

我的 JavaScript / jQuery 代码是：

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

所以问题是它没有应用崩溃状态，所有项目总是打开的。我想出我是否在段落元素手风琴作品中包装模板代码＆gt;它以奇怪的方式工作：所有项目都被打开，它有两个额外的按钮，每个按钮仅用于打开或隐藏内容，并且标题位于其中一个下方。

你可以建议我做错了吗？好像它会是某种新手问题。

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

尝试使用以下方法制作手风琴：

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

jQuery UI Accordion不适用于HTML模板

UPDATE：

1 个答案: