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课程并将targetHeight更改为0。

＆＃13;

$(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);
    }

  });

});

＆＃13;

* {
  -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;
}

＆＃13;

<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>

＆＃13;

Answer 2

您只需要检查点击的部分是否为展开的部分，然后反向动画，然后移除您选择的部分＆＃39;从它上课。我会补充说，通过简单地使用CSS3进行动画和大小调整以及JS只是为了添加和删除类，可以更好地处理这个问题。检查此链接。

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

＆＃13;

   $(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);  
      }
      
     
    }
    
  });
  
});

＆＃13;

* { 
  -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;
}

＆＃13;

<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>

＆＃13;

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
}

这是一个小提琴：http://jsfiddle.net/0sfn0gqk/

常见问题Accordian折叠点击

3 个答案: