0

无论我点击什么，我都会得到一个折叠的菜单。顶层工作正常，它可以正确折叠和打开。但是子菜单根本不起作用。我不确定处理这个问题的正确方法是什么。任何人都可以帮忙吗？

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

2 回答 2

0

您的 HTML 标记中有错误。根据文档，

Accordions 支持任意标记，但每个内容面板必须始终是其关联标题之后的下一个兄弟。有关如何使用自定义标记结构的信息，请参阅标题选项。

所以你需要确保你的手风琴标题和面板是兄弟姐妹，

<div id="sectionContainer">
  <a href="#"><!-- header title --></a>
  <div class="panel">
    <div class="sectionContent">
      <a href="#"><!-- header title --></a>
      <div> class="sub-panel">
      </div>
      <a href="#"><!-- header title --></a>
      <div class="sub-panel"></div>
    </div> <!-- sectionContent -->
  </div> <!-- panel -->
</div> <!-- sectionContainer -->

你的脚本变成了，

$(function() {
   $("#sectionContainer, .sectionContent").accordion({
     header: " > a",
     collapsible: true,
     active: false,
   });
 });

我已经设置了一个现在可以工作的jsFiddle示例！

于 2021-01-12T16:47:51.460 回答
-1 
 $(function() {
 $( "#sectionContainer, .sectionContent" ).accordion({
   header: ".section > a",
   collapsible: true,
   active: false, // <---
 });
 });

你有错误“，”激活后：假，

应该

 $(function() {
 $( "#sectionContainer, .sectionContent" ).accordion({
   header: ".section > a",
   collapsible: true,
   active: false
 });
 });
于 2013-09-23T20:17:21.167 回答