Question

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

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

Answer 1

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

活动后您有错误“，”：false，

应该是

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

Answer 2

您的 HTML 标记有误。根据{{3}}，

<块引用>

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

所以你需要确保你的手风琴标题和面板是同级的，

<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,
   });
 });

我已经设置了一个现在有效的 documentation 示例！

嵌套的jQuery UI手风琴不起作用

2 个答案: