常见问题单击时手风琴折叠

Question

我的网站上有手风琴常见问题解答部分。当您单击标题时，它目前会展开，但我希望您再次单击标题时它会折叠。单击展开部分时如何使其折叠？我在教程中包含了我正在使用的代码片段，希望它能起作用。

已编辑：修复了片段，它现在应该展开了，我想知道当我在展开的部分再次单击标题时如何让它折叠起来。

HTML:

   $(document).ready(function(){
  var animTime = 300,
      clickPolice = false;
  
  $(document).on('touchstart click', '.acc-btn', function(){
    if(!clickPolice){
       clickPolice = true;
      
      var currIndex = $(this).index('.acc-btn'),
          targetHeight = $('.acc-content-inner').eq(currIndex).outerHeight();
   
      $('.acc-btn h1').removeClass('selected');
      $(this).find('h1').addClass('selected');
      
      $('.acc-content').stop().animate({ height: 0 }, animTime);
      $('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);

      setTimeout(function(){ clickPolice = false; }, animTime);
    }
    
  });
  
});

* { 
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
}

html, body {
  background:#FFFFFF;
}

.acc-container {
  width:90%;
  margin:30px auto 0 auto;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  -o-border-radius:8px;
  border-radius:8px;
  overflow:hidden;
}

.acc-btn { 
  width:100%;
  margin:0 auto;
  padding:20px 25px;
  cursor:pointer;
  background:#34495E;
  border-bottom:1px solid #2C3E50;
}

.acc-content {
  height:0px;
  width:100%;
  margin:0 auto;
  overflow:hidden;
  background:#2C3E50;
}

.acc-content-inner {
  padding:30px;
}

.open {
  height: auto;
}

h1 {
  font:700 20px/26px 'Lato', sans-serif;
  color:#ffffff;
}

p { 
  font:400 16px/24px 'Lato', sans-serif;
  color:#798795;
}

.selected {
  color:#1ABC9C;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="acc-container">
<div class="acc-btn"><h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1></div>
<div class="acc-content">
  <div class="acc-content-inner">
    <p>Proin sodales, nibh eget sollicitudin consectetur, elit nisl malesuada urna, ac fermentum turpis urna id augue. Vestibulum eu consectetur nunc. In ultricies erat nisl, a fringilla risus viverra sed. Phasellus vel sodales elit. Morbi nec adipiscing dolor. Vivamus volutpat vitae velit vel sagittis.</p>
  </div>
</div>

<div class="acc-btn"><h1>Curabitur et diam vitae dolor accumsan aliquet et in massa.</h1></div>
<div class="acc-content">
  <div class="acc-content-inner">
    <p>Nulla facilisi. Proin sodales dolor in odio lacinia, ut venenatis massa lobortis. Morbi congue dignissim nisi gravida consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed egestas diam. Nunc ut mauris tempus, rutrum massa vel, pellentesque velit. Nullam eget diam sit amet diam pretium scelerisque. Nunc sed odio nisi. Nunc odio est, rhoncus vitae risus a, sagittis ultrices mauris. Fusce scelerisque posuere pulvinar.</p>
  </div>
</div>

<div class="acc-btn"><h1>Proin faucibus sem sed dapibus dapibus.</h1></div>
<div class="acc-content">
  <div class="acc-content-inner">
    <p>Praesent ultricies risus quis magna convallis, ac condimentum tellus laoreet. Donec dictum velit enim, nec hendrerit leo mattis sit amet.</p>
  </div>
</div>

<div class="acc-btn"><h1>Praesent lobortis urna non est faucibus, vestibulum mattis diam sollicitudin.</h1></div>
<div class="acc-content">
  <div class="acc-content-inner">
    <p>Fusce eget ultricies ante. In augue urna, rhoncus ac tellus non, porta malesuada magna. Nulla tincidunt orci in metus rhoncus, at malesuada quam varius. Mauris sed tincidunt massa, ut cursus magna. Pellentesque cursus sapien turpis, id blandit magna tempus at.</p>
  </div>
</div>
</div>

Answer 1

基本上，只需检查您的标题是否已展开，如果是，请删除 selected class 并将 targetHeight 更改为 0。

$(document).ready(function() {
  var animTime = 300,
    clickPolice = false;

  $(document).on('touchstart click', '.acc-btn', function() {
    if (!clickPolice) {
      clickPolice = true;

      var currIndex = $(this).index('.acc-btn'),
          isExpanded = $(this).find('h1').hasClass('selected'),
          targetHeight = isExpanded ? 0 : $('.acc-content-inner').eq(currIndex).outerHeight();

      $('.acc-btn h1').removeClass('selected');
      $(this).find('h1').toggleClass('selected', !isExpanded);

      $('.acc-content').stop().animate({
        height: 0
      }, animTime);
      $('.acc-content').eq(currIndex).stop().animate({
        height: targetHeight
      }, animTime);

      setTimeout(function() {
        clickPolice = false;
      }, animTime);
    }

  });

});

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  box-sizing: border-box;
}
html,
body {
  background: #FFFFFF;
}
.acc-container {
  width: 90%;
  margin: 30px auto 0 auto;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
  overflow: hidden;
}
.acc-btn {
  width: 100%;
  margin: 0 auto;
  padding: 20px 25px;
  cursor: pointer;
  background: #34495E;
  border-bottom: 1px solid #2C3E50;
}
.acc-content {
  height: 0px;
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  background: #2C3E50;
}
.acc-content-inner {
  padding: 30px;
}
.open {
  height: auto;
}
h1 {
  font: 700 20px/26px'Lato', sans-serif;
  color: #ffffff;
}
p {
  font: 400 16px/24px'Lato', sans-serif;
  color: #798795;
}
.selected {
  color: #1ABC9C;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="acc-container">
  <div class="acc-btn">
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
  </div>
  <div class="acc-content">
    <div class="acc-content-inner">
      <p>Proin sodales, nibh eget sollicitudin consectetur, elit nisl malesuada urna, ac fermentum turpis urna id augue. Vestibulum eu consectetur nunc. In ultricies erat nisl, a fringilla risus viverra sed. Phasellus vel sodales elit. Morbi nec adipiscing
        dolor. Vivamus volutpat vitae velit vel sagittis.</p>
    </div>
  </div>

  <div class="acc-btn">
    <h1>Curabitur et diam vitae dolor accumsan aliquet et in massa.</h1>
  </div>
  <div class="acc-content">
    <div class="acc-content-inner">
      <p>Nulla facilisi. Proin sodales dolor in odio lacinia, ut venenatis massa lobortis. Morbi congue dignissim nisi gravida consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed egestas diam. Nunc ut mauris tempus, rutrum massa
        vel, pellentesque velit. Nullam eget diam sit amet diam pretium scelerisque. Nunc sed odio nisi. Nunc odio est, rhoncus vitae risus a, sagittis ultrices mauris. Fusce scelerisque posuere pulvinar.</p>
    </div>
  </div>

  <div class="acc-btn">
    <h1>Proin faucibus sem sed dapibus dapibus.</h1>
  </div>
  <div class="acc-content">
    <div class="acc-content-inner">
      <p>Praesent ultricies risus quis magna convallis, ac condimentum tellus laoreet. Donec dictum velit enim, nec hendrerit leo mattis sit amet.</p>
    </div>
  </div>

  <div class="acc-btn">
    <h1>Praesent lobortis urna non est faucibus, vestibulum mattis diam sollicitudin.</h1>
  </div>
  <div class="acc-content">
    <div class="acc-content-inner">
      <p>Fusce eget ultricies ante. In augue urna, rhoncus ac tellus non, porta malesuada magna. Nulla tincidunt orci in metus rhoncus, at malesuada quam varius. Mauris sed tincidunt massa, ut cursus magna. Pellentesque cursus sapien turpis, id blandit magna
        tempus at.</p>
    </div>
  </div>
</div>

Answer 2

您只需要检查点击的部分是否是展开的部分，然后反向制作动画并从中删除您的 'selected' class。不过，我要补充一点，这可以通过简单地使用 CSS3 进行动画和大小调整以及仅使用 JS 添加和删除 classes 来更好地处理。检查此 link。

How can I transition height: 0; to height: auto; using CSS?

   $(document).ready(function(){
  var animTime = 300,
      clickPolice = false;
  
  $(document).on('touchstart click', '.acc-btn', function(){
    if(!clickPolice){
       clickPolice = true;
      
      var currIndex = $(this).index('.acc-btn'),
          targetHeight = $('.acc-content-inner').eq(currIndex).outerHeight();
   
      if($(this).find('h1').hasClass('selected')){
        $('.acc-btn h1').removeClass('selected');
        $('.acc-content').stop().animate({ height: targetHeight }, animTime);
        $('.acc-content').eq(currIndex).stop().animate({ height: 0 }, animTime);

        setTimeout(function(){ clickPolice = false; }, animTime);  
      }else{
        $('.acc-btn h1').removeClass('selected');
        $(this).find('h1').addClass('selected');
        $('.acc-content').stop().animate({ height: 0 }, animTime);
        $('.acc-content').eq(currIndex).stop().animate({ height: targetHeight }, animTime);

        setTimeout(function(){ clickPolice = false; }, animTime);  
      }
      
     
    }
    
  });
  
});

* { 
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  -o-box-sizing:border-box;
  box-sizing:border-box;
}

html, body {
  background:#FFFFFF;
}

.acc-container {
  width:90%;
  margin:30px auto 0 auto;
  -webkit-border-radius:8px;
  -moz-border-radius:8px;
  -o-border-radius:8px;
  border-radius:8px;
  overflow:hidden;
}

.acc-btn { 
  width:100%;
  margin:0 auto;
  padding:20px 25px;
  cursor:pointer;
  background:#34495E;
  border-bottom:1px solid #2C3E50;
}

.acc-content {
  height:0px;
  width:100%;
  margin:0 auto;
  overflow:hidden;
  background:#2C3E50;
}

.acc-content-inner {
  padding:30px;
}

.open {
  height: auto;
}

h1 {
  font:700 20px/26px 'Lato', sans-serif;
  color:#ffffff;
}

p { 
  font:400 16px/24px 'Lato', sans-serif;
  color:#798795;
}

.selected {
  color:#1ABC9C;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="acc-container">
<div class="acc-btn"><h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1></div>
<div class="acc-content">
  <div class="acc-content-inner">
    <p>Proin sodales, nibh eget sollicitudin consectetur, elit nisl malesuada urna, ac fermentum turpis urna id augue. Vestibulum eu consectetur nunc. In ultricies erat nisl, a fringilla risus viverra sed. Phasellus vel sodales elit. Morbi nec adipiscing dolor. Vivamus volutpat vitae velit vel sagittis.</p>
  </div>
</div>

<div class="acc-btn"><h1>Curabitur et diam vitae dolor accumsan aliquet et in massa.</h1></div>
<div class="acc-content">
  <div class="acc-content-inner">
    <p>Nulla facilisi. Proin sodales dolor in odio lacinia, ut venenatis massa lobortis. Morbi congue dignissim nisi gravida consequat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sed egestas diam. Nunc ut mauris tempus, rutrum massa vel, pellentesque velit. Nullam eget diam sit amet diam pretium scelerisque. Nunc sed odio nisi. Nunc odio est, rhoncus vitae risus a, sagittis ultrices mauris. Fusce scelerisque posuere pulvinar.</p>
  </div>
</div>

<div class="acc-btn"><h1>Proin faucibus sem sed dapibus dapibus.</h1></div>
<div class="acc-content">
  <div class="acc-content-inner">
    <p>Praesent ultricies risus quis magna convallis, ac condimentum tellus laoreet. Donec dictum velit enim, nec hendrerit leo mattis sit amet.</p>
  </div>
</div>

<div class="acc-btn"><h1>Praesent lobortis urna non est faucibus, vestibulum mattis diam sollicitudin.</h1></div>
<div class="acc-content">
  <div class="acc-content-inner">
    <p>Fusce eget ultricies ante. In augue urna, rhoncus ac tellus non, porta malesuada magna. Nulla tincidunt orci in metus rhoncus, at malesuada quam varius. Mauris sed tincidunt massa, ut cursus magna. Pellentesque cursus sapien turpis, id blandit magna tempus at.</p>
  </div>
</div>
</div>

Answer 3

这似乎来自旧教程。手风琴的代码太多了！

你需要两件事：一些切换和一些CSS。

切换：

$(document).ready(function(){

  $(document).on('touchstart click', '.acc-btn', function(){

    $(this).toggleClass('selected');

  });

});

CSS:

.acc-content {
  height:0px;
}
.selected + .acc-content {
    height: auto;
}
.selected h1 {
  color:#1ABC9C;
}

如果您希望一次只显示一个窗格...

$(document).ready(function(){

  $(document).on('touchstart click', '.acc-btn', function(){

    // Next line 'closes' everything by removing the class selected from everything
    // except the one we just clicked, otherwise it wouldn't toggle—
    // the class would get removed and then added back two lines down.
    $('.acc-container').find('.selected').not(this).removeClass('selected');

    $(this).toggleClass('selected');

  });

});

如果你想让它们在打开和关闭时有动画效果，你可以使用 CSS:

.acc-content {
  max-height:0px; //since we can't animate to height: auto;
  -webkit-transition: all 0.35s ease-in-out 0s;
  -moz-transition: all 0.35s ease-in-out 0s;
  transition: all 0.35s ease-in-out 0s;
}
.selected + .acc-content {
    max-height: 400px; // or whatever you think you'd need as a max
}

这里是 fiddle：http://jsfiddle.net/0sfn0gqk/

常见问题单击时手风琴折叠

FAQ Accordian Collapse on Click

javascript

html

css

accordion

collapse