아코디언 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();
});
따라서 문제는 축소 상태를 적용하지 않고 모든 항목이 항상 열려 있다는 것입니다. 단락 요소 아코디언에서 템플릿 코드를 래핑하면 작동합니다> 이상한 방식으로 작동합니다. 모든 항목이 열리고 콘텐츠 열기 또는 숨기기에만 책임이있는 두 개의 추가 버튼이 있으며 헤더는 그중 하나 아래에 있습니다.
내가 뭘 잘못하고 있는지 제안 해 주시겠습니까? 일종의 초심자 문제인 것 같습니다.
<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>
다음을 사용하여 아코디언을 만들어보십시오.
$.get('/templates/nav-cats.html', function(templates) {
$.tmpl(templates, navigationJson).appendTo("#navaccordion");
$("#navaccordion").accordion();
});
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다