堆栈内存溢出
  简体   繁体   English

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

[英]How can I avoid opening multiple elements at one time using Bootstrap collapse

 原文  2014-02-27 23:02:06  1   1    javascript/ jquery/ twitter-bootstrap/ twitter-bootstrap-3/ collapse

问题描述

I'm using Bootstrap 3 and can't figure out how to only allow the opening of one element at a time using their collapse feature. 我正在使用Bootstrap 3并且无法弄清楚如何使用它们的折叠功能一次只允许打开一个元素。

Currently, clicking the linked image reveals the collapsed div as expected. 目前，单击链接的图像会按预期显示折叠的div。 But if you click a different linked image, the corresponding div also appears without closing the first. 但是，如果单击其他链接图像，则相应的div也会在不关闭第一个图像的情况下显示。

What am I missing here? 我在这里错过了什么？

Here's my HTML: 这是我的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>

1 个解决方案

解决方案1
 2 已采纳  2014-02-27 23:05:21

Bootstrap doesn't support what you're looking for out of the box. Bootstrap不支持开箱即用的内容。 What you'll need to do is listen to the "show.bs.collapse" event that bootstrap triggers and then collapse the others. 您需要做的是听取引导触发器然后折叠其他触发器的“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');
  });
});

you'll see that I added the .employee-collapse class to the elements just to be more specific. 你会看到我将.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>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 Bootstrap崩溃 - 同时打开多个手风琴 - Bootstrap collapse - opening multiple accordions at the same time 在表中使用引导崩溃和div时如何避免缓慢崩溃 - How to avoid slow collapse when using bootstrap collapse and div in a table 如何使用引导程序3或4一次显示一个崩溃 - How to display one collapse at a time with bootstrap 3 or 4 如何使用@ coreui-react每次仅折叠一次？ - How can I collapse only one each time using @coreui-react? 如何使用 JavaScript 关闭 Bootstrap Collapse？ - How can I close a Bootstrap Collapse using JavaScript? 如何在php中动态使用多个bootstrap折叠元素 - how to use multiple bootstrap collapse elements dynamically in php 如何一次显示一个元素？ - How can I display elements one at a time? 如何使用jQuery折叠列表中的元素？ - How can I collapse elements in a list with jQuery? 如何确定引导程序崩溃是打开还是关闭？ - How to determine if a bootstrap collapse is opening or closing? 如何折叠引导程序折叠中的多个克隆元素之一 - How to collapse one of multiple cloned element in bootstrap collaps
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM