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并尝试一下。

Answer 2

这解决了这个问题：

$('.accordion-toggle').click(function(){

也请改用类名accordion。 ID应该是唯一的。

Answer 3

您可以先关闭所有内容，然后打开当前单击的内容。

此外，所有ID均应唯一，请参见：https://www.w3schools.com/html/html_id.asp

       $(document).ready(function($) {
        $('.accordion-toggle').click(function(){
          //Close all
          $(".accordion-content").each(function(){
            $(this).slideUp('fast');
          })
          
           $(this).next().slideToggle('fast');
    
        });
      });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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" style="display: none;">
<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>
<h4 class="accordion-toggle">What if something is wrong with my order?</h4>
<div class="accordion-content" style="display: none;">
<p>Did we get your address wrong? Is something not right in your confirmation email? Please let us know by emailing us at hello@trvlboutiq.com so that we can update your information prior to us monogramming your order and dispatching it. Please put “wrong order information” in the subject line so we can assist you promptly. Please refer to our terms and conditions for conditions of purchase.</p>
</div>
<h4 class="accordion-toggle">Do you offer AfterPay?</h4>
<div class="accordion-content" style="display: none;">
<p>Yes we do! You can wear now and pay later with payment by Afterpay. You will just need to pay 4 equal amounts fortnightly but still receive your TrvlBoutiq product right away. <br> TrvlBoutiq is not responsible for any overdue payments. All payments after checkout are handled directly by Afterpay. For more information, visit Afterpay’s complete terms &amp; conditions.</p>
</div>
</div>

Answer 4

尝试添加：

$(".accordion-toggle").click(function(){
        $(this).slideToggle('fast');
    });

  
  $(".accordion-toggle").click(function(){
    $(this).slideToggle('fast');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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 5

您的代码有些错误。

首先，将accordion ID更改为类名。 ID只能在页面上使用一次。
第二，我怀疑这是问题所在，即结束动画代码。 $(".accordion-content").not($(this).next()).slideUp('fast');如果我看对的话，您在这里基本上是在说： “在页面上找到所有具有类名accordion-content的元素。对于每个元素，为没有同级元素的元素调用slideUp动画。”

我在这里建议首先关闭所有手风琴项目，然后滑动打开被单击的项目。
另外，将<meta>标记放入divs可能不是您应该使用的方式，并且可能是多余的。元标记通常放置在页面的<head>部分中。
也许最好将.accordion-toggle和accordion-content元素的每组放入包装器中，例如

<div class="accordion-item"> <h4 class="accordion-toggle"></h4> <div class="accordion-content"></div> </div>

（对不起，格式如此糟糕，编辑器似乎出现了问题）

这使得它更不容易出现错误，并且可以更好地控制各个项目。

如何修复此简单的手风琴，JavaScript无法正常工作

5 个答案: