javascript - 如何避免使用 Bootstrap 折叠一次打开多个元素

Question

我正在使用 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>

Answer 1

Bootstrap 不支持您正在寻找的开箱即用的功能。您需要做的是监听 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>