手风琴不工作 bootstrap

Question

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

HTML代码：

<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 fiddle: https://jsfiddle.net/aybg7qwh/

Answer 1

尝试添加此功能：

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

Fiddle: https://jsfiddle.net/aybg7qwh/1/

手风琴不工作 bootstrap

Accordion not working bootstrap

jquery

html

twitter-bootstrap-3

accordion