嵌套的UI手风琴

Nested UI Accordions?

本文关键字：手风琴 UI 嵌套      更新时间：2023-09-26

我正在使用Jquery UI Accordion

这是html结构

<div class="accordion">
  <div class="accordion-section">
     <div class="accordion-head">
     </div>
     <div class="accordion-body">
     </div>
   </div>
   <div class="accordion-section">
     <div class="accordion-head">
     </div>
     <div class="accordion-body">
     </div>
   </div>
</div>

这是JS调用

$(".accordion").accordion({
    header: ".accordion-head",
    collapsible: true,
    active: false,
    heightStyle: "content"
});

现在，在我把手风琴套在手风琴里之前，这个效果很好。当您单击嵌套手风琴时，父手风琴将关闭。。。

我做错了什么？我可以嵌套标签，为什么不能嵌套手风琴？

我在这里放了一个JS小提琴：http://jsfiddle.net/mktmapyu/

尝试：

$(".accordion").accordion({
    header: ">.accordion-head", //Note the selector change
    collapsible: true,
    active: false,
    heightStyle: "content"
});

而不是

$(".accordion").accordion({
    header: ".accordion-head",
    collapsible: true,
    active: false,
    heightStyle: "content"
});

演示：http://jsfiddle.net/lotusgodkk/mktmapyu/3/

解释：当你通过".account-head"时，意味着所有带有类".accord-head"的元素都将作为手风琴的标题。但是，当您通过">.acordo-head"时，它会将直属子项设置为标题为class".acordo-chead"，因此切换仅适用于相应的手风琴。

相关文章：