Bootstrap 手风琴问题

Question

我正在关注有关引导手风琴的视频教程和演示，它的工作正常，但有一个问题，我必须单击以打开手风琴的每一行，然后再次单击自身以关闭我想在单击另一个第一次关闭时切换，依此类推 首先这里的屏幕截图很容易理解我的意思： http : //www.4shared.com/download/xNSLTB57/accordoineIssue.PNG

现在这里的代码：

<div id="accordion" class="panel-group">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#first" data-toggle="collapse" data-parent="#accordion">First</a>
            </div>
            <div class="panel-collapse collapse" id="first">
                <div class="panel-body">
                    <img src="images/lebowski-1.jpg" alt="1" />
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#secound" data-toggle="collapse" data-parent="#accordion">
                    Secound</a>
            </div>
            <div class="panel-collapse collapse" id="secound">
                <div class="panel-body">
                    <img src="images/lebowski-2.jpg" alt="2" />
                </div>
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#third" data-toggle="collapse" data-parent="#accordion">Third</a>
            </div>
            <div class="panel-collapse collapse" id="third">
                <div class="panel-body">
                    <img src="images/lebowski-3.jpg" alt="3" />
                </div>
            </div>
        </div>
    </div>
</div> 

最后在这里它假设工作： http : //www.4shared.com/download/GuM54zUE/Capture.PNG

Answer 1

尝试

<div class="panel-group" id="accordion">
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#first">First</a>
            </div>
        </div><!--Here heading has to close and collapse has to start-->
        <div class="panel-collapse collapse" id="first">
            <div class="panel-body">
                <img src="images/lebowski-1.jpg" alt="1" />
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#secound" data-toggle="collapse" data-parent="#accordion">
                    Secound</a>
            </div>
        </div>
        <div class="panel-collapse collapse" id="secound">
            <div class="panel-body">
                <img src="images/lebowski-2.jpg" alt="2" />
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">
                <a class="collapsed" href="#third" data-toggle="collapse" data-parent="#accordion">Third</a>
            </div>
        </div>
        <div class="panel-collapse collapse" id="third">
            <div class="panel-body">
                <img src="images/lebowski-3.jpg" alt="3" />
            </div>
        </div>
    </div>
</div> 

演示：小提琴