嵌套 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 fiddle: 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”时，意味着所有带有class“.accordion-head”的元素都可以工作作为手风琴的 header。但是当你通过 ">.accordion-head" 时，它将立即设置 child 和 class ".accordion-head" for header 因此切换将起作用仅适用于相应的手风琴。