我正在使用Bootstrap 3，并且无法弄清楚如何只允许使用其折叠功能一次打开一个元素。
目前，点击链接的图片可以按预期显示折叠的div。但是，如果单击其他链接图像，则会显示相应的div而不关闭第一个。
我在这里缺少什么？
这是我的HTML：
<section id="employees" class="text-center">
<ul id="employee_list" class="list-unstyled list-inline">
<li class="employee_info">
<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse1"><img src="/media/cache/5a/a3/5aa3c3ab6d4af27b6efe20a8b3d9b119.jpg" width="175" height="175" class="img-circle" alt="Charles"></a>
<h2>Charles<br><small>Owner</small></h2>
</li>
<li class="employee_info">
<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse4"><img src="/media/cache/0a/a1/0aa14aaa5f95ed5eb86bb0a81fec5dd6.jpg" width="175" height="175" class="img-circle" alt="Kathleen"></a>
<h2>Kathleen<br><small>Design Consultant</small></h2>
</li>
<li class="employee_info">
<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse2"><img src="/media/cache/f1/ad/f1adc6187d0209e5ff14ed43118ca6b8.jpg" width="175" height="175" class="img-circle" alt="Carlos"></a>
<h2>Carlos<br><small>Project Manager</small></h2>
</li>
<li class="employee_info">
<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse3"><img src="/media/cache/88/16/88169162a66ed65beba79b5502a7955a.jpg" width="175" height="175" class="img-circle" alt="Phil"></a>
<h2>Phil<br><small>Project Manager</small></h2>
</li>
</ul>
<div id="collapse1" class="collapse">
<p class="employee_bio">d convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero</p>
</div>
<div id="collapse4" class="collapse">
<p class="employee_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p>
</div>
<div id="collapse2" class="collapse">
<p class="employee_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p>
</div>
<div id="collapse3" class="collapse">
<p class="employee_bio">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p>
</div>
</section>
答案 0 :(得分：2)
Bootstrap不支持开箱即用的内容。您需要做的是听取引导触发器的“show.bs.collapse”事件，然后折叠其他事件。
$(".employee-collapse").on("show.bs.collapse", function(e) {
$(".employee-collapse").not(e.target).each(function(i, el){
if ($(el).is(":visible"))
$(el).collapse('hide');
});
});
你会看到我将.employee-collapse类添加到元素中只是为了更具体。
<section id="employees" class="text-center">
<ul id="employee_list" class="list-unstyled list-inline">
<li class="employee_info">
<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse1"><img src="/media/cache/5a/a3/5aa3c3ab6d4af27b6efe20a8b3d9b119.jpg" width="175" height="175" class="img-circle" alt="Charles"></a>
<h2>Charles<br><small>Owner</small></h2>
</li>
<li class="employee_info">
<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse4"><img src="/media/cache/0a/a1/0aa14aaa5f95ed5eb86bb0a81fec5dd6.jpg" width="175" height="175" class="img-circle" alt="Kathleen"></a>
<h2>Kathleen<br><small>Design Consultant</small></h2>
</li>
<li class="employee_info">
<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse2"><img src="/media/cache/f1/ad/f1adc6187d0209e5ff14ed43118ca6b8.jpg" width="175" height="175" class="img-circle" alt="Carlos"></a>
<h2>Carlos<br><small>Project Manager</small></h2>
</li>
<li class="employee_info">
<a data-toggle="collapse" data-parent="#employee_list" data-target="#collapse3"><img src="/media/cache/88/16/88169162a66ed65beba79b5502a7955a.jpg" width="175" height="175" class="img-circle" alt="Phil"></a>
<h2>Phil<br><small>Project Manager</small></h2>
</li>
</ul>
<div id="collapse1" class="collapse employee-collapse">
<p class="employee_bio"><strong>Charles</strong> d convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero</p>
</div>
<div id="collapse4" class="collapse employee-collapse">
<p class="employee_bio"><strong>Kathleen</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p>
</div>
<div id="collapse2" class="collapse employee-collapse">
<p class="employee_bio"><strong>Carlos</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p>
</div>
<div id="collapse3" class="collapse employee-collapse">
<p class="employee_bio"><strong>Phil</strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum sodales vulputate. Nullam vulputate ante in posuere sodales. Quisque tempor nunc id convallis placerat. Maecenas id urna velit. Etiam et eros tristique magna adipiscing cursus a nec sem. Curabitur sagittis non libero quis luctus. Quisque imperdiet ante quis mauris pharetra, eu eleifend ligula pretium. Etiam tempor libero sed lacus lacinia tristique. Nam malesuada massa eu interdum tincidunt. Aliquam pretium neque arcu, quis accumsan justo tincidunt eget.</p>
</div>
</section>