javascript - 如果单击相同则关闭 Accordion

Question

我的网站上有 Accordion 。它工作完美。如果一个 Accordion 打开并点击第二个，那么它将关闭前一个。目前没有问题。

我的问题是，如果单击 Accordion ，我必须关闭 Accordion 。我的意思是，如果 Accordion 打开并点击它，那么它应该关闭。

你能检查我的脚本吗？我应该在哪里添加关闭脚本？ 我试过了

 $('.ac-pane.active .ac-title').click(function(){
 getparent.find('.ac-pane').removeClass('active');
 //  $(this).next('.ac-content').slideUp();
 $('.ac-pane .ac-content').css('display', 'none');

 });

//Accordion
$(function() {
  'use strict';

  var selector = $('.ac-title');

  $('.accordion-wrapper').each(function() {
    if ($(this).find('.ac-pane').hasClass('active')) {
      $('.ac-pane.active .ac-content').css('display', 'block');
    }
  });

  selector.on('click', function(event) {
    event.preventDefault();

    // get the attr value
    var attr = selector.attr('data-accordion');
    var getparent = $(this).closest('.accordion-wrapper');

    if ($(this).attr('data-accordion') == 'true') {

      if ($(this).next('.ac-content').is(':visible')) {
        return false;
      } else {

        getparent.find('.ac-content').slideUp();
        $(this).next('.ac-content').slideDown();
        getparent.find('.ac-pane').removeClass('active');
        $(this).parent().addClass('active');
      }

    } else {
      $(this).next('.ac-content').slideToggle();
      $(this).parent().toggleClass('active');
    }

  });
});

.ac-pane {
  margin-bottom: 15px;
  color: #000;
}

.ac-pane:last-child {
  margin-bottom: 0;
}

.ac-content {
  display: none;
}

.ac-title {
  /*border: 1px solid #000;*/
  color: #000;
  display: block;
  padding: 12px;
}

.ac-title i {
  float: right;
  font-size: 20px;
}

.ac-title i:before {
  content: "\f107";
}

.active .ac-title i:before {
  content: "\f106";
}

.ac-content {
  border: 1px solid #fff;
  margin-top: -1px;
  padding: 15px;
}

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="heading">
          <h2>Accordion Demo</h2>
        </div>
        <div class="accordion-wrapper">
          <div class="ac-pane active">
            <a href="#" class="ac-title" data-accordion="true">
              <span>Hello World</span>
              <i class="fa"></i>
            </a>
            <div class="ac-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
            </div>
          </div>
          <div class="ac-pane">
            <a href="#" class="ac-title" data-accordion="true">
              <span>Hello World</span>
              <i class="fa"></i>
            </a>
            <div class="ac-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
            </div>
          </div>
          <div class="ac-pane">
            <a href="#" class="ac-title" data-accordion="true">
              <span>Hello World</span>
              <i class="fa"></i>
            </a>
            <div class="ac-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
            </div>
          </div>
          <div class="ac-pane">
            <a href="#" class="ac-title" data-accordion="true">
              <span>Hello World</span>
              <i class="fa"></i>
            </a>
            <div class="ac-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

Answer 1

您可以做类似的事情，选择被点击元素的 parent 并从兄弟元素和 slideToggle 被点击元素内容中移除事件类。

$('.ac-pane.active .ac-content').css('display', 'block');

$(".ac-title").click(function(e) {
  e.preventDefault();
  
  const parent = $(this).parent('.ac-pane');
  const siblings = parent.siblings('.ac-pane');
  
  siblings.removeClass('active');
  siblings.find('.ac-content').slideUp();
  
  parent.toggleClass('active');
  parent.find('.ac-content').slideToggle();
})

.ac-pane {
  margin-bottom: 15px;
  color: #000;
}

.ac-pane:last-child {
  margin-bottom: 0;
}

.ac-content {
  display: none;
}

.ac-title {
  /*border: 1px solid #000;*/
  color: #000;
  display: block;
  padding: 12px;
}

.ac-title i {
  float: right;
  font-size: 20px;
}

.ac-title i:before {
  content: "\f107";
}

.active .ac-title i:before {
  content: "\f106";
}

.ac-content {
  border: 1px solid #fff;
  margin-top: -1px;
  padding: 15px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<section>
  <div class="container">
    <div class="row">
      <div class="col-sm-12">
        <div class="heading">
          <h2>Accordion Demo</h2>
        </div>
        <div class="accordion-wrapper">
          <div class="ac-pane active">
            <a href="#" class="ac-title" data-accordion="true">
              <span>Hello World</span>
              <i class="fa"></i>
            </a>
            <div class="ac-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
            </div>
          </div>
          <div class="ac-pane">
            <a href="#" class="ac-title" data-accordion="true">
              <span>Hello World</span>
              <i class="fa"></i>
            </a>
            <div class="ac-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
            </div>
          </div>
          <div class="ac-pane">
            <a href="#" class="ac-title" data-accordion="true">
              <span>Hello World</span>
              <i class="fa"></i>
            </a>
            <div class="ac-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
            </div>
          </div>
          <div class="ac-pane">
            <a href="#" class="ac-title" data-accordion="true">
              <span>Hello World</span>
              <i class="fa"></i>
            </a>
            <div class="ac-content">
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil ullam architecto earum reprehenderit dolore iusto labore sed, sunt, quasi soluta assumenda, a quam aspernatur repudiandae enim. Architecto, assumenda tempore vitae!
            </div>
          </div>
        </div>
      </div>


    </div>
  </div>
</section>