Jquery手风琴嵌套问题

发布于 2024-07-26 10:48:13 字数 1704 浏览 2 评论 0原文

我在设置两个独立的手风琴时遇到问题。它们应该独立打开/关闭，并且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>

原文

I am having trouble setting up two independent accordions.
They should open / close independently and accordion2 should be nested in accordion1 (code see below)
What happends right now is that they are overlapping each other when opened and IE is even overwriting 'text below accordion 1'. This should not happen.

Any ideas what to improve?

Thanks a lot any help!
Cheers

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

分享到QQ

分享到微博