如何只开一张卡？

Question

请帮我在点击时只打开一张卡片（现在所有卡片都同时打开），如果有一张打开，但我点击另一张，然后打开的卡片关闭，我点击的那张打开。或者，如果您有使用 "show more" 的类似卡片示例，我将不胜感激。用这个展示评论方便吗，还是需要用轮播？谢谢

$(document).ready(function() {
  
  var descMinHeight = 20;
  var desc = $('.desc');
  var descWrapper = $('.desc-wrapper');

  // show more button if desc too long
  if (desc.height() > descWrapper.height()) {
    $('.more-info').show();
  }
  
  // When clicking more/less button
  $('.more-info').click(function() {
    
    var fullHeight = $('.desc').height();

    if ($(this).hasClass('expand')) {
      // contract
      $('.desc-wrapper').animate({'height': descMinHeight}, 'slow');
    }
    else {
      // expand 
      $('.desc-wrapper').css({'height': descMinHeight, 'max-height': 'none'}).animate({'height': fullHeight}, 'slow');
    }

    $(this).toggleClass('expand');
    return false;
  });

});

.container {
  display:flex;
  flex-wrap:wrap;
}

.desc-wrapper {
  margin: 0 auto;
  margin-bottom: 0px;
  max-height: 50px;
  overflow: hidden;
}

.more-info {
  display: none;
}

.more-info .less,
.more-info.expand .more {
  display: none;
}
.more-info.expand .less {
  display: inline;
}

.more-info:focus {
  outline: none;
}
span.glyphicon {
  margin-left: 3px;
}


figure.snip1204 {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 225px;
  width: 100%;
}
figure.snip1204 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-xs-12 col-md-4">
<figure class="snip1204">
<blockquote><div class="reviews-body">
  <div class="desc-wrapper">
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </div>
  </div>

<button class="more-info send-btn"><span class="more">More</span><span class="less">Hide</span></button>
</blockquote>
</figure>
</div>

    <div class="col-xs-12 col-md-4">
<figure class="snip1204">
<blockquote><div class="reviews-body">
  <div class="desc-wrapper">
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </div>
  </div>

  <button class="more-info send-btn"><span class="more">More</span><span class="less">Hide</span></button>
</blockquote>
</figure>
</div>


      <div class="col-xs-12 col-md-4">
<figure class="snip1204">
<blockquote><div class="reviews-body">
  <div class="desc-wrapper">
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </div>
  </div>

  <button class="more-info send-btn"><span class="more">More</span><span class="less">Hide</span></button>
</blockquote>
</figure>
</div>

</div>

Answer 1

您可以获取父项，然后使用选择器找到子项：

$(this).parent().children('.desc-wrapper') // ...

$(document).ready(function() {
  
  var descMinHeight = 20;
  var desc = $('.desc');
  var descWrapper = $('.desc-wrapper');

  // show more button if desc too long
  if (desc.height() > descWrapper.height()) {
    $('.more-info').show();
  }
  
  // When clicking more/less button
  $('.more-info').click(function() {
    
    var fullHeight = $('.desc').height();

    if ($(this).hasClass('expand')) {
      // contract
      $(this).parent().children('.desc-wrapper').animate({'height': descMinHeight}, 'slow');
    }
    else {
      // expand 
      $(this).parent().children('.desc-wrapper').css({'height': descMinHeight, 'max-height': 'none'}).animate({'height': fullHeight}, 'slow');
    }

    $(this).toggleClass('expand');
    return false;
  });

});

.container {
  display:flex;
  flex-wrap:wrap;
}

.desc-wrapper {
  margin: 0 auto;
  margin-bottom: 0px;
  max-height: 50px;
  overflow: hidden;
}

.more-info {
  display: none;
}

.more-info .less,
.more-info.expand .more {
  display: none;
}
.more-info.expand .less {
  display: inline;
}

.more-info:focus {
  outline: none;
}
span.glyphicon {
  margin-left: 3px;
}


figure.snip1204 {
  position: relative;
  overflow: hidden;
  margin: 10px;
  min-width: 220px;
  max-width: 225px;
  width: 100%;
}
figure.snip1204 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="col-xs-12 col-md-4">
<figure class="snip1204">
<blockquote><div class="reviews-body">
  <div class="desc-wrapper">
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </div>
  </div>

<button class="more-info send-btn"><span class="more">More</span><span class="less">Hide</span></button>
</blockquote>
</figure>
</div>

    <div class="col-xs-12 col-md-4">
<figure class="snip1204">
<blockquote><div class="reviews-body">
  <div class="desc-wrapper">
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </div>
  </div>

  <button class="more-info send-btn"><span class="more">More</span><span class="less">Hide</span></button>
</blockquote>
</figure>
</div>


      <div class="col-xs-12 col-md-4">
<figure class="snip1204">
<blockquote><div class="reviews-body">
  <div class="desc-wrapper">
    <div class="desc">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore </div>
  </div>

  <button class="more-info send-btn"><span class="more">More</span><span class="less">Hide</span></button>
</blockquote>
</figure>
</div>

</div>

如何只开一张卡？

How to open just one card?

html

javascript

css

jquery

toggle