我正在关注this令人惊奇的指南显示两行文本，并为用户提供“阅读更多”的链接。
转换未按预期进行。有人可以指出我在这里做错了什么吗？
#module {
font-size: 1rem;
line-height: 1.5;
}
#module p.collapse[aria-expanded="false"] {
display: block;
height: 3rem !important;
overflow: hidden;
}
#module p.collapse.show[aria-expanded="false"] {
height: 3rem !important;
}
#module a.collapsed:after {
content: '+ Show More';
}
#module a:not(.collapsed):after {
content: '- Show Less';
}
<div id="module" class="container">
<h3>Bacon Ipsum</h3>
<p class="collapse" id="collapseExample" aria-expanded="false">
Bacon ipsum dolor amet doner picanha tri-tip biltong leberkas salami meatball tongue filet mignon landjaeger tail. Kielbasa salami tenderloin picanha spare ribs, beef ribs strip steak jerky cow. Pork chop chicken ham hock beef ribs turkey jerky. Shoulder
beef capicola doner, tongue tail sausage short ribs andouille. Rump frankfurter landjaeger t-bone, kielbasa doner ham hock shankle venison. Cupim capicola kielbasa t-bone, ball tip chicken andouille venison pork chop doner bacon beef ribs kevin shankle.
Short loin leberkas tenderloin ground round shank, brisket strip steak ham hock ham.
</p>
<a role="button" class="collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
</a>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
您的代码可能适用于 bootstrap 3。但由于您使用的是 bootstrap 4，请尝试以下操作。
替换这个
#module p.collapse[aria-expanded="false"] {
display: block;
height: 3rem !important;
overflow: hidden;
}
#module p.collapse.show[aria-expanded="false"] {
height: 3rem !important;
}
有了这个
#module #collapseExample.collapse:not(.show) {
display: block;
height: 3rem;
overflow: hidden;
}
#module #collapseExample.collapsing {
height: 3rem;
}
Fiddle
也只是想提醒您一下::after是一个伪元素，因此使用双冒号表示法
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
