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

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>