我为 Accordion 用户界面而苦恼。它适用于像这样的静态测试内容:
<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();
});
所以问题是它不应用折叠状态，所有项目总是打开的。我发现如果我将模板代码包装在段落元素 Accordion 中 works> 它以奇怪的方式工作:所有项目都打开，它有两个额外的按钮，每个按钮仅负责打开或隐藏内容，标题位于其中一个下方。
你能指出我做错了什么吗？这似乎是某种新手问题。
更新:
<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>
最佳答案
尝试使用以下方法制作 Accordion :
$.get('/templates/nav-cats.html', function(templates) {
$.tmpl(templates, navigationJson).appendTo("#navaccordion");
$("#navaccordion").accordion();
});
关于javascript - jQuery UI Accordion 不适用于 HTML 模板，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25323496/