我已经设置了一个 Bootstrap 折叠插件以用于我的常见问题列表:
https://jsfiddle.net/2d8ytuq0/
<ul class="faq__questions">
<li>
<a href="#" data-toggle="collapse" data-target="#faq__question_1">..</a>
<p class="collapse" id="faq__question_1">...</p>
</li>
</ul>
问题是当你折叠扩展描述时它有点“跳跃”。我认为这是由于 p
元素的底部边距所致。我尝试用 padding-bottom
替换它,但这并没有解决问题。有没有办法在不破坏原始布局的情况下解决这个问题?
最佳答案
这个问题是因为你折叠的元素有一个margin-bottom:15px
。
您的新 HTML 标记
<div class="collapse" id="faq__question_1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe nesciunt rerum mollitia nobis corporis sint error quaerat cupiditate animi doloribus! Voluptas dolores, incidunt perspiciatis labore velit libero minus consequuntur blanditiis.</p>
</div>
关于javascript - 防止 Bootstrap 从 "jumping"折叠元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37023478/