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

Nested jQuery UI Accordion Not working

本文关键字：手风琴 不起作用 UI jQuery 嵌套      更新时间：2023-09-26

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

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

HTML 标记中存在错误。 根据文档，

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

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

<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 示例！

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

您有错误 "，"在活动后： 假，

应该是 

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