嵌套UI手风琴？

Question

我正在使用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"
});

现在，这种方法很好，直到我将手风琴嵌入手风琴中。当您点击嵌套手风琴时，父手风琴会关闭......

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

我在这里放了一个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”类的元素都将作为手风琴的标题。但是当你传递“＆gt; .accordion-head”时，它会为标题设置“.accordion-head”类的直接子节点，因此切换只适用于相应的手风琴。