嵌套的UI手风琴？

Question

我正在使用Jquery UI手风琴

这是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/

Answer 1

尝试：

$(".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/

说明：当您传递“ .accordion-head”时，这意味着所有具有“ .accordion-head”类的元素都将用作手风琴的标题。 但是，当您传递“>”。accordion-head“时，它将为标题设置” .accordion-head“类的直接子对象，因此切换仅适用于相应的手风琴。