如何使用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不支持开箱即用的内容。 您需要做的是听取引导触发器然后折叠其他触发器的“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>