javascript - 停止对此的点击操作

Question

我正在使用 jQuery 做一个简单的常见问题解答 Accordion ，并且我正在尝试禁用对 this 的额外单击，因为当单击 this 时，它会再次向上滑动因为这是再次被点击的那个。

如何禁用单击或禁用单击按钮(被单击的按钮)后再次上下滑动的操作？

(function($) {
  $('.c-accordion__panel').hide();
  $('.c-accordion__heading').click(function() {
    $('.c-accordion__panel').slideUp('fast'); //slide up panel
    $(this).parent('div').children('.c-accordion__panel').slideDown('fast'); //slide down panel
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="faqs" class="clearfix pb3">
  <div class="col-12">
    <h3 class="pb3">Colocation FAQ</h3>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading 1</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel active">
        <p>this one has active Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next
          level vinyl kinfolk, beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading2</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel">
        <p>Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next level vinyl kinfolk,
          beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading3</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel">
        <p>Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next level vinyl kinfolk,
          beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
  </div>
</section>

Answer 1

单击的元素是 .c-accordion__heading，要调用 slideUp 的元素是 .c-accordion__panel，即下一个 sibling 。所以 您可以在调用 slideUp 之前添加 .not($(this).next()):

(function($) {
  $('.c-accordion__panel').hide();
  $('.c-accordion__heading').click(function() {
    $('.c-accordion__panel').not($(this).next()).slideUp('fast'); //slide up panel
    $(this).parent('div').children('.c-accordion__panel').slideDown('fast'); //slide down panel
  });
})(jQuery);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section id="faqs" class="clearfix pb3">
  <div class="col-12">
    <h3 class="pb3">Colocation FAQ</h3>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading 1</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel active">
        <p>this one has active Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next
          level vinyl kinfolk, beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading2</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel">
        <p>Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next level vinyl kinfolk,
          beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
    <div class="c-accordion">
      <div class="c-accordion__heading flex justify-between border">
        <h4>heading3</h4>
        <i class="fas fa-chevron-right"></i>
      </div>
      <div class="c-accordion__panel">
        <p>Mumblecore biodiesel semiotics vice, sustainable banh mi ennui irony vape waistcoat drinking vinegar banjo scenester put a bird on it kickstarter. Dreamcatcher forage tousled gluten-free, taiyaki 3 wolf moon truffaut. Next level vinyl kinfolk,
          beard fanny pack biodiesel pinterest cold-pressed tumeric venmo franzen affogato disrupt wolf 90's. </p>
      </div>
    </div>
  </div>
</section>