Question

我已经设置了一个Bootstrap崩溃插件，用于我的常见问题列表：

<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替换它，但这并没有解决问题。有没有办法在不破坏原始布局的情况下解决这个问题？

Answer 1

此问题的原因是您的折叠元素有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>

Answer 2

只需添加此css即可覆盖margin属性。这样可以正常使用

.faq__questions > li p {
    margin: 0;
}

Answer 3

您总是可以向其中添加一个CSS过渡。

我向面板和margin-top上的css过渡添加了活动状态。

JS

// Add active class to open panel on faqs accordion
$('.faq__questions').on('show.bs.collapse', 'li', function () {
    $(this).addClass('active');
});

$('.faq__questions').on('hide.bs.collapse', 'li', function () {
    $(this).removeClass('active');
});

CSS

.faq__questions li .collapse{
    margin-top: 0;
    transition: all .2s ease-in-out;
}

.faq__questions li.active .collapse{
    margin-top: 30px;
}

阻止Bootstrap崩溃项目“跳跃”

3 个答案: