手風琴無法正常啟動

Question

我正在嘗試使用bootstrap崩潰在我正在構建的站點上創建一個手風琴。 我可以使每個面板折疊起來，但不能像手風琴一樣工作（折疊任何其他打開的面板）。 我在這里進行搜索，發現了一些建議添加.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小提琴： https : //jsfiddle.net/aybg7qwh/

Answer 1

嘗試添加此功能：

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

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