Question

我正在尝试使用Bootstrap 3和折叠插件创建一个效果，其中内容面板在隐藏时始终向上滑动，并在显示时向下滑动。

复杂之处在于内容面板滑入/滑出相同的空间，折叠/手风琴效果使得看起来被替换的面板向下滑动，具体取决于它在面板组中的位置。

HTML

<div class="caseStudyContent collapse" id="caseStudyContent-0">
    <div class="row">           
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 caseStudyContentCol">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla elementum, magna ac aliquet sagittis, quam nisi blandit purus, ac dapibus neque odio quis urna. Maecenas tristique euismod diam, nec pellentesque tortor dignissim at. Donec in quam ut nisl suscipit gravida. Integer eget finibus sem. Sed rutrum vehicula faucibus. Ut molestie nunc ac neque dapibus, eu tristique enim malesuada. Donec nec cursus odio. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vivamus lorem dolor, dapibus ut felis dignissim, porta mattis tellus.</p>
            <a class="closeCaseStudy">X</a>
        </div>
    </div>
</div>

<div class="caseStudyContent collapse" id="caseStudyContent-1">
    <div class="row">           
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 caseStudyContentCol">
            <p>Ut porta luctus lobortis. Pellentesque pellentesque tempus ex, a ultrices justo mollis ac. Curabitur at luctus quam, et sagittis justo. Fusce eget euismod leo. Donec blandit est vulputate tincidunt ullamcorper. Morbi ultrices luctus massa, ac rutrum lectus aliquam non. Suspendisse dapibus consectetur arcu, et convallis dui porttitor vehicula. Vestibulum pulvinar pellentesque tempor. Fusce feugiat fermentum egestas. Cras in tristique tellus, nec consequat arcu.</p>
            <a class="closeCaseStudy">X</a>
        </div>
    </div>
</div>

<div class="caseStudyContent collapse" id="caseStudyContent-2">
    <div class="row">           
        <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6 caseStudyContentCol">
            <p>Morbi vulputate consectetur lorem, eget ultricies risus hendrerit eget. Duis tempus sapien ac mi consectetur sollicitudin. Fusce porta lorem mi, ac dignissim neque tincidunt vel. Ut eget nisl sed arcu aliquam facilisis a a magna. Maecenas et tempus lectus. Aenean ultricies sit amet diam eu sagittis. Nullam et odio tellus. Etiam sit amet arcu nec mi auctor feugiat quis nec ligula. Nullam id euismod purus. Ut nec pretium enim. Fusce lorem sapien, ullamcorper in nisi ut, pulvinar fermentum nisl. Phasellus tortor neque, porttitor vitae massa sollicitudin, varius bibendum diam. Maecenas ultricies finibus justo id dictum. Maecenas nunc libero, malesuada eget volutpat quis, elementum at mauris. Proin luctus posuere metus, vitae posuere est feugiat sed.</p>
            <a class="closeCaseStudy">X</a>
        </div>
    </div>
</div>

JAVASCRIPT

$('.closeCaseStudy').on('click',function(){$('.in').collapse('hide');})
$('.caseStudyButton').on('click',function(){$('.in').collapse('hide');})

我在这里创建了一个jsfiddle来演示我正在尝试实现的交互，同时展示转换看起来很奇怪：http://jsfiddle.net/6h6g8qce/

理想情况下，我想做的是以某种方式将hide.bs.collapse设为始终触发幻灯片，而show.bs.collapse 始终触发slideDown

我也想知道是否有可能延迟show.bs.collapse其他元素直到hidden.bs.collapse发生，所以有一个平滑的滑出，然后滑入？

如何使用Bootstrap 3折叠创建幻灯片输入/输出面板？

0 个答案: