3

我正在关注关于引导手风琴的视频教程和演示它的工作正常但是有一个问题我必须单击以打开手风琴的每一行并再次单击自身以关闭我想在单击其他第一次关闭时切换等等 首先这里的屏幕截图很容易理解我的意思： 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

4

2 回答 2

5

尝试

<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>

演示：小提琴

于 2013-12-25T09:37:25.650 回答
0

似乎是div嵌套的问题

<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>

演示：小提琴

于 2013-12-25T09:41:11.723 回答