问题描述
在三列中，我使用Bootstrap的折叠类创建了“更多信息”设置（这是在一行中输入的原始html）：
<div class="blog grid-view col3">
<div class="blog-posts">
<div class="isotope row">
<div class="col-sm-6 col-md-4 grid-view-post">
<div class="post">
<figure>
<a href="../../our-work/independent/bebc/">
<div class="overlay">
<div class="info"><span>View Project</span></div>
</div>
<img src="../../wp-content/uploads/2020/05/002-ATKINS_1240x914_.jpg"
class="attachment-ryla-grid size-ryla-grid wp-post-image"
alt=""
height="300"
width="440">
</a>
</figure>
<div class="post-content">
<h3 class="post-title"><a href="../../our-work/independent/bebc/">Business
Entrepreneurship Boot Camp</a></h3>
<div class="Meta"> </div>
<p>Lorem Ipsum quad est felito que nuncan pare neque porro
quisquam est qui dolorem ipsum quia dolor sit amet,consectetur,adipisci velit…<a data-toggle="collapse" data-target="#rm_bebc" class="btn">Read
More</a>
<span id="rm_bebc" class="collapse">
Lorem ipsum dolor sit amet,consectetur adipisicing elit,sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-view-post">
<div class="post">
<figure> <a href="../../our-work/independent/nftp/">
<div class="overlay">
<div class="info"><span>View Project</span></div>
</div>
<img src="../../wp-content/uploads/2020/05/022-fareWELL_1240x914.jpg"
class="attachment-ryla-grid size-ryla-grid wp-post-image"
alt=""
height="300"
width="440">
</a> </figure>
<div class="post-content">
<h3 class="post-title"><a href="../../our-work/independent/nftp/">Netherlands
Fulbright Teachers Program</a></h3>
<div class="Meta"> </div>
<p>Lorem Ipsum quad est felito que nuncan pare neque porro
quisquam est qui dolorem ipsum quia dolor sit amet,adipisci velit…<a data-toggle="collapse" data-target="#rm_nftp" class="exp_col">
Read More</a>
<span id="rm_nftp" class="collapse">
Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
</p>
</div>
</div>
</div>
<div class="col-sm-6 col-md-4 grid-view-post">
<div class="post">
<figure> <a href="../../our-work/independent/step-up/" target="_blank">
<div class="overlay">
<div class="info"><span>View Project</span></div>
</div>
<img src="../../wp-content/uploads/2020/05/suu_logo_1240x914_.jpg"
class="attachment-ryla-grid size-ryla-grid wp-post-image"
alt=""
height="300"
width="440">
</a> </figure>
<div class="post-content">
<h3 class="post-title"><a href="../../our-work/independent/step-up/"
target="_blank">Step
Up</a></h3>
<div class="Meta"> </div>
<p>STEP-UP stands for Sustain,Train,Educate and Promote in
Uganda. STEP-UP is an ITD project which offers medical and and
psycho-social…<a data-toggle="collapse" data-target="#rm_su">Read More</a>
<span id="rm_su" class="collapse">
Lorem ipsum dolor sit amet,quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
我想要的是一个功能，当其中一个“阅读更多”链接被激活时，它将增加行的高度；并在添加“ Read Less”选项后将其减小。
我很难为此找到合适的javascript函数。我没有向系统添加新二进制文件的权限。
解决方法
事实证明，我要做的就是将三个<div class="post">部分分解并放入各自的引导程序列中-这些列是自己扩展的！