如何制作嵌套的可折叠JS手风琴？

Question

这是我的手风琴代码。如果我将嵌套级别添加到此手风琴中，则当我在嵌套节中更改不同级别时，它不会保持嵌套级别打开。它关闭了整个事情。

  <!-- JS -->
      <script type="text/javascript">
        $(document).ready(function($) {
          $('#accordion').find('.accordion-toggle').click(function(){

            //Expand or collapse this panel
            $(this).next().slideToggle('fast');

            //Hide the other panels
            $(".accordion-content").not($(this).next()).slideUp('fast');

          });
        });
      </script>

      <!-- CSS -->
      <style>
        .accordion-toggle {cursor: pointer;}
        .accordion-content {display: none;}
        .accordion-content.default {display: block;}
      </style>

      <!-- HTML -->
      <div id="accordion">
        <h4 class="accordion-toggle">Accordion 1</h4>
        <div class="accordion-content default">
          <p>Cras malesuada ultrices augue molestie risus.</p>
        </div>
        <h4 class="accordion-toggle">Accordion 2</h4>
        <div class="accordion-content">
          <p>Lorem ipsum dolor sit amet mauris eu turpis.</p>
        </div>
        <h4 class="accordion-toggle">Accordion 3</h4>
        <div class="accordion-content">
          <p>Vivamus facilisisnibh scelerisque laoreet.</p>
        </div>
      </div>

Answer 1

尝试使用此代码：

$(document).ready(function($) {
  $('#accordion .accordion-toggle').click(function(){

    $('.accordion-content').slideUp('fast');
    $(this).next('.accordion-content').slideDown('fast');

  });
});