Question

我正在关注一个关于bootstrap手风琴的视频教程和演示它的工作正常但有一个问题我必须点击打开手风琴的每一行并再次点击它自己关闭我想要点击其他第一个关闭时切换等等 首先在这里拍摄屏幕以轻松获得我的意思： 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>

演示：Fiddle

Answer 2

似乎是divs嵌套的问题

<div id="accordion" class="panel-group">
<div class="panel panel-info">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a href="#first" data-toggle="collapse" data-parent="#accordion">First</a>
        </h4>
    </div>
        <div class="panel-collapse collapse in" 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">
        <h4 class="panel-title">
            <a  href="#secound" data-toggle="collapse" data-parent="#accordion">
                Secound</a>
        </h4>
    </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">
        <h4 class="panel-title">
            <a href="#third" data-toggle="collapse" data-parent="#accordion">Third</a>
        </h4>
    </div>
        <div class="panel-collapse collapse" id="third">
            <div class="panel-body">
                <img src="images/lebowski-3.jpg" alt="3" />
            </div>
        </div>
    </div>

演示：fiddle

Bootstrap手风琴问题

2 个答案: