Question

我有这个代码，其内容应该崩溃，并且一次只能存在一个集合。我添加了正确的库，但是一旦嵌入到html页面中，它就无法正常工作。我找不到问题。它仍然同时显示内容。代码取自http://jsfiddle.net/Sherbrow/nuNsp/83/

＆＃13;

.collapse.in { min-height: 50px;border: 1px solid blue; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myGroup">
    <button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys </button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button>
    
    <div class="accordion-group">
        <div class="collapse indent" id="keys">
            keys
        </div>
    
        <div class="collapse indent" id="attrs">
            attrs
        </div>
    
        <div class="collapse" id="edit">
            edit
        </div>
    </div>
</div>

＆＃13;

Answer 1

您可能遇到库版本问题。

检查下面我已经更改了与您提供的示例相同的bootstrap js和css版本。

＆＃13;

.collapse.in { min-height: 50px;border: 1px solid blue; }

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/2.0.4/css/bootstrap.min.css" rel="stylesheet"/>
<div id="myGroup">
    <button class="btn dropdown" data-toggle="collapse" data-target="#keys" data-parent="#myGroup"><i class="icon-chevron-right"></i> Keys </button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#attrs" data-parent="#myGroup"><i class="icon-chevron-right"></i> Attributes</button>
    <button class="btn dropdown" data-toggle="collapse" data-target="#edit" data-parent="#myGroup"><i class="icon-chevron-right"></i> Edit Details</button>
    
    <div class="accordion-group">
        <div class="collapse indent" id="keys">
            keys
        </div>
    
        <div class="collapse indent" id="attrs">
            attrs
        </div>
    
        <div class="collapse" id="edit">
            edit
        </div>
    </div>
</div>

＆＃13;

为什么这不会在HTML中崩溃

1 个答案: