Question

我正在尝试使用bootstrap collapse在我正在构建的网站上创建一个手风琴。我可以让每个面板都崩溃，但不能让它像手风琴一样工作（折叠任何其他开放式面板）。我在这里搜索过，发现了一些建议添加.panel .panel-group .accordion-group类的帖子。我已经做到了这一点，但仍然无法让它发挥作用。我怀疑这可能与我的div如何布局有关，但是想知道是否有人可以提供帮助？

HTML code：

<div class="container">
<div class="row">
    <div class="col-md-10 col-md-offset-1">
        <div class="accordian-group panel-group" id="accordion">
            <div class="credit-box text-center panel">
                <div class="row">
                    <div class="col-md-12">
                        <div class="credit-title">
                             <h2><span class="title-bold">Bronze</span> | £48.50 (2 Credits)</h2>

                        </div>
                        <div class="credit-summary">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non porta purus, vel scelerisque metus. Phasellus tincidunt purus dignissim, mollis massa in, cursus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                        </div>
                        <div class="credit-more  collapse" id="credit-bronze">
                            <p>Maecenas a dictum quam, eget faucibus ex. Donec quis elementum sapien. Nulla mollis finibus velit, et auctor lacus iaculis at. Suspendisse potenti. In viverra nisi tortor.</p>
                            <p>Ut tincidunt odio quis nulla rutrum ullamcorper ac non risus. Vestibulum id malesuada sapien, at hendrerit risus. In dignissim libero non mi facilisis condimentum.</p>
                            <p>n tincidunt dui eget pharetra luctus. Integer eget iaculis nulla. Quisque pretium eu odio nec congue. Pellentesque tempus rutrum eros, vitae rhoncus libero commodo vel.s</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-md-offset-4">
                        <div class="post-button"> 
                           <a data-toggle="collapse" data-parent="#accordion" href="#credit-bronze">View More</a>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="post-button"> 
                           <a href="#">Select</a>
                        </div>
                    </div>
                </div>
            </div>
            <div class="credit-box text-center panel">
                <div class="row">
                    <div class="col-md-12">
                        <div class="credit-title">
                             <h2><span class="title-bold">Silver</span> | £135 (6 Credits)</h2>

                        </div>
                        <div class="credit-summary">
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec non porta purus, vel scelerisque metus. Phasellus tincidunt purus dignissim, mollis massa in, cursus nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
                        </div>
                        <div class="credit-more  collapse" id="credit-silver">
                            <p>Maecenas a dictum quam, eget faucibus ex. Donec quis elementum sapien. Nulla mollis finibus velit, et auctor lacus iaculis at. Suspendisse potenti. In viverra nisi tortor.</p>
                            <p>Ut tincidunt odio quis nulla rutrum ullamcorper ac non risus. Vestibulum id malesuada sapien, at hendrerit risus. In dignissim libero non mi facilisis condimentum.</p>
                            <p>n tincidunt dui eget pharetra luctus. Integer eget iaculis nulla. Quisque pretium eu odio nec congue. Pellentesque tempus rutrum eros, vitae rhoncus libero commodo vel.s</p>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2 col-md-offset-4">
                        <div class="post-button"> 
                          <a data-toggle="collapse" data-parent="#accordion" href="#credit-silver">View More</a>
                        </div>
                    </div>
                    <div class="col-md-2">
                        <div class="post-button"> 
                          <a href="#">Select</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

JS小提琴：https://jsfiddle.net/aybg7qwh/

Answer 1

尝试添加此功能：

$('#accordion').on('show.bs.collapse', function () {
    $('#accordion .in').collapse('hide');
});

小提琴：https://jsfiddle.net/aybg7qwh/1/

手风琴不能正常工作

1 个答案: