Question

<div class="inf-frame-text">
<h4> Learning Plus </h4>
<p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation.  </p>
<a class="inf-read-btn"> Read More + </a>
</div>

        .inf-frame-text {
            margin-top: 120px;
            &:first-child {
                margin-top: 0;
            }
            p {
                height: 62px;
                overflow: hidden;
                transition:height 0.3s ease-out;
            }
            p.is-active {
                height: 100%;
                overflow: visible;
                transition:height 0.3s ease-out;
            }
        .inf-read-btn {
            display: block;
            color:#00ffbf !important; 
            cursor: pointer;
        }

      $('.inf-read-btn').on('click', function() {
        $('.inf-frame-text p').toggleClass('is-active');
      });

嘿，我需要创建一些包含内容的网格。但是应该隐藏部分内容，当我单击“更多阅读”按钮时，它应该显示带有切换动画的所有内容。在这里，我只是为此尝试了一些Java脚本代码，但是效果不佳。还有一件事情是，当单击该按钮时，除了与我们要单击的按钮相关的内容之外，其他所有内容都应隐藏。

Answer 1

这可能是因为您没有正确关闭.inf-frame-text样式。它缺少右括号。

.inf-frame-text {
   margin-top: 120px;

   &:first-child {
      margin-top: 0;
   }

$('.inf-read-btn').on('click', function() {
  // Find the container whose button was clicked
  var $container = $(this).closest('.inf-frame-text');
  // find the p inside it
  var $elem = $container.find('p');
  
  // toggle the p element for that container
  $elem.toggleClass('is-active');
  
  $('.inf-frame-text p').not($elem).removeClass('is-active');
});

.wrapper {
  display: flex;
  flex: 1 0 auto;
}

.inf-frame-text {
  margin-top: 120px;
  &:first-child {
    margin-top: 0;
  }
}

p {
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.3s ease-out;
}

p.is-active {
  opacity: 1;
  overflow: visible;
}

.inf-read-btn {
  display: block;
  color: #00ffbf !important;
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div class="wrapper">
  <div class="inf-frame-text">
    <h4> Learning Plus </h4>
    <p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply
      everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. </p>
    <a class="inf-read-btn"> Read More + </a>
  </div>
  <div class="inf-frame-text">
    <h4> Learning Plus </h4>
    <p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next innovation. For our clients, the future is a continuum. It’s not about the next big thing, it's simply
      everything</p>
    <a class="inf-read-btn"> Read More + </a>
  </div>
  <div class="inf-frame-text">
    <h4> Learning Plus </h4>
    <p> For our clients, the future is a continuum. It’s not about the next big thing, it's simply everything that's next. The next experience. The next in it's simply everything that's next. The next experience. The next innovation. </p>
    <a class="inf-read-btn"> Read More + </a>
  </div>
</div>

单击按钮时如何显示隐藏的段落？

1 个答案: