javascript - 如何修复这个简单的 Accordion ，JavaScript 不工作

Question

我正在尝试在 this page 发货后修复后续元素.前 3 个有效，但在下一个标题之后它没有点击。为什么？

是不是因为脚本在某个时候坏了。请告诉我如何解决这个问题。它说我的帖子主要是代码所以我会继续添加更多的话

<!-- 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 -->
<h2>Orders</h2>

<div id="accordion">
  <meta charset="utf-8" />
  <h4 class="accordion-toggle"><span>What methods of Payment do you accept?        
    </span></h4>
  <div class="accordion-content default">
    <p>We accept all of the following: Visa, Mastercard, American Express credit and debit cards and PayPal. We also offer our customers Afterpay (see terms via https://www.afterpay.com.au). All prices on our site are stated in Australian dollars (AUD).
      .</p>
  </div>
</div>

<h2>Shipping</h2>
<div id="accordion">
  <h4 class="accordion-toggle">HOW LONG WILL IT TAKE FOR MY ORDER TO ARRIVE?</h4>
  <div class="accordion-content default">
    <p>Cras malesuada ultrices augue molestie risus.</p>
  </div>
  <h4 class="accordion-toggle">Who do you ship with?</h4>
  <div class="accordion-content">
    <p>Our orders are sent by Australia Post.

如此等等，但它不起作用

Answer 1

ID 选择器是唯一选择器，它应该是唯一的，但是你在同一个页面中多次使用它，我认为这可能是问题所在。你可以把 id 改成 class 试试看。