找到你要的答案

Q:Nested UI Accordions?

Q:嵌套的UI手风琴吗?

I am using Jquery UI Accordion

Here is the html structure

<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>  

And here is the JS call

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

Now, this works fine until I nest accordion within accordion. When you click on the nesting accordions, the parent accordion closes...

What am I doing wrong? I can nest Tabs, why can't I nest accordions?

I have put a JS fiddle here: http://jsfiddle.net/mktmapyu/

我使用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/

answer1: 回答1:

Try:

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

instead of

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

Demo: http://jsfiddle.net/lotusgodkk/mktmapyu/3/

Explanation: When you pass ".accordion-head" it means that all the elements with class ".accordion-head" will work as header for the accordion. But when you pass ">.accordion-head" then it will set the immediate child with class ".accordion-head" for header and hence the toggling will work only for the corresponding accordions.

尝试:

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

说明:当你通过“手风琴头”时,意味着所有带有“手风琴头”的元素将作为手风琴的头。但是,当你通过“>;。手风琴头”,然后将“直接子类集。手风琴头”为标题,因此切换只会对相应的手风琴作品。

javascript  jquery  jquery-ui  accordion  jquery-ui-accordion