Question

我在设置两架独立手风琴时遇到了麻烦。它们应该独立打开/关闭，accordion2应该嵌套在accordion1中（代码见下文）
现在发生的事情是它们在打开时相互重叠，IE甚至覆盖了“手风琴1下面的文字”。这不应该发生。

有什么想法要改进吗？

非常感谢任何帮助！
干杯

    <script type="text/javascript">

        $(document).ready(function() {
                $("#accordion1").accordion();
                $("#accordion2").accordion();

                $('#accordion1 .q1').click(function() {
                  $(this).next().toggle();
                     return false;
                }).next().hide();

                $('#accordion2 .q2').click(function() {
                  $(this).next().toggle();
                     return false;
                }).next().hide();

        });

    </script>
    <style type="text/css">

                 #sub1 { height:100px; background: #FF0000;}
                 #sub2 { height:100px; background: #FF00FF;}
    </style>

  </HEAD>
  <BODY>

        <div id="accordion1">
           <div>
              <a class="q1" href="#">
                 accordion 1
              </a>
              <div id="sub1">
                 <div id="accordion2">
                    <div>
                       <a class="q2" href="#">
                         accordion 2
                       </a>
                       <div id="sub2">
                         222222222
                       </div>
                    </div>
                 </div>
              text below accordion 2
              </div>
           </div>
        </div>
        text below accordion 1
  </BODY>
</HTML>

Answer 1

使用#accordian1 > div > .q1代替#accordian1 .q1，因为该选择器也匹配第二个手风琴的子节点。

Jquery手风琴嵌套问题

1 个答案: