嵌套手风琴立即打开和关闭

Question

我有以下 fiddle：http://jsfiddle.net/bgejtbyk/2/

第二个标题打开后，下面有2个副标题。当我尝试打开这两个子中的任何一个时，它们打开并迅速关闭主手风琴。

我做错了什么？干杯。

$( "#accordion" ).accordion({
heightStyle: "content",
collapsible: true,
active: 'none',
});

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<!--Accordian-->
<div id="accordion" style="margin-top:20px;">
<!--Title--> 
 <h3 style="border-top:solid 1px #71a232; border-bottom:solid 1px #71a232"><p class="dropdownTitleText" style="color:#f7941d;">Agri Business Division</p></h3>
<!--Title-->
<!--Content-->        
      <div class="accordion-content">
                TEXT TEXT TEXT
     </div>
<!--Content--> 
<!--Title--> 
 <h3 style="border-top:solid 1px #71a232; border-bottom:solid 1px #71a232"><p class="dropdownTitleText" style="color:#4f9bd1;">Consumer Business Division</p></h3>
<!--Title-->
<!--Content--> 
<div>
<div id="accordion">
 <h3 style="border-top:solid 1px #71a232; border-bottom:solid 1px #71a232"><p class="dropdownTitleText" style="color:#4f9bd1;">SUB1</p></h3>       
      <div class="accordion-content">
   SUB1 TEXT
     </div>
        
 <h3 style="border-top:solid 1px #71a232; border-bottom:solid 1px #71a232"><p class="dropdownTitleText" style="color:#4f9bd1;">SUB2</p></h3>       
      <div class="accordion-content">
   SUB2 TEXT
     </div>
</div>
</div>
<!--Content--> 
</div>
<!--Accordian-->

Answer 1

更新了您的 fiddle。问题是您有两个具有相同 ID 的元素，因此将 "id" 更改为 "class" 将解决此问题：

<div class="accordion" style="margin-top:20px;"><!--First element-->
<div class="accordion"><!--Second element--></div>

$(".accordion").accordion({
    heightStyle: "content",
    collapsible: true,
    active: 'none',
});

嵌套手风琴立即打开和关闭

Nested Accordion opens and closes immidiately

jquery

nested

accordion