何をクリックしても、折りたたまれたメニューが表示されます。最上位は問題なく動作し、折りたたまれて正しく開きます。しかし、サブメニューはまったく機能していません。これを処理する適切な方法が何であるかはわかりません。誰でも助けることができますか?
jquery
$(function() {
$( "#sectionContainer, .sectionContent" ).accordion({
header: ".section > a",
collapsible: true,
active: false,
});
});
HTML:
<div id="sectionContainer">
<div class="section">
<a href="#"><div class="tab active">
<span class="chevron"><img src="images/up.png" /></span><h3>Section 1</h3>
</div></a> <!-- tab -->
<ul class="sectionContent">
<div class="section"><a href="#"><li class="status complete"><h4>Introduction</h4></li></a>
<ul class="sublist">
<a href="#"><li class="status"><h6>Sub-subsection 1</h6></li></a>
<a href="#"><li class="status"><h6>Sub-subsection 2</h6></li></a>
</ul> <!-- Sub-subsections -->
</div> <!-- subsection -->
<div class="section"><a href="#"><li class="status active arrow"><h5>Subsection 1</h5></li></a>
<ul class="sublist">
<a href="#"><li class="status"><h6>Sub-subsection 1</h6></li></a>
<a href="#"><li class="status"><h6>Sub-subsection 2</h6></li></a>
</ul> <!-- Sub-subsections -->
</div> <!-- subsection -->
<div class="section"><a href="#"><li class="status"><h5>Subsection 3</h5></li></a>
<ul class="sublist">
<a href="#"><li class="status"><h6>Sub-subsection 1</h6></li></a>
<a href="#"><li class="status"><h6>Sub-subsection 2</h6></li></a>
</ul> <!-- Sub-subsections -->
</div> <!-- subsection -->
<div class="section"><a href="#"><li class="status"><h5>Review</h5></li></a>
<ul class="sublist">
<a href="#"><li class="status"><h6>Sub-subsection 1</h6></li></a>
<a href="#"><li class="status"><h6>Sub-subsection 2</h6></li></a>
</ul> <!-- Sub-subsections -->
</div> <!-- subsection -->
</ul> <!-- sectionContent -->
</div> <!-- section1 -->
</div> <!-- sectionContainer -->