堆栈内存溢出
  简体   繁体   English

如果所有引导手风琴都打开，请检查并执行某些操作

[英]Check and do something if all bootstrap accordions are open

 原文  2020-03-16 14:36:20  0   1    javascript/ jquery/ twitter-bootstrap

问题描述

I have a bootstrap accordion and also a "open all" , "close all" button which works fine but what I am trying to do is when the accordions are all opened manually and not by the open all, close all button have the button change to "close all".我有一个引导手风琴和一个“全部打开”、“全部关闭”按钮，它工作正常，但我想要做的是当手风琴全部手动打开而不是全部打开时，关闭所有按钮改变按钮“关闭所有”。 is there a way to check if all the accordions are open so I can add the button functionality?有没有办法检查所有手风琴是否都打开，以便我可以添加按钮功能？ I know you can use shown.bs.collapse and hidden.bs.collapse to see if an accordion is open but how would you check if ALL are open?我知道您可以使用shown.bs.collapse 和hidden.bs.collapse 来查看手风琴是否打开，但是您将如何检查是否全部打开？

<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
    <div class="panel-heading">
        <div class="l-col-panel">
            <div class="panel-title__wrapper">
                <div class="accordion__text">
                    <!--panel title -->
                    <h3 class="title-3">Title</h3>
                </div>
            </div>
            <div class="accordion-toggle__angle-icon">
                <!-- angle icon -->
                <i class="accordion__angle fa fa-angle-down"></i>
            </div>
        </div>
        <!-- /.l-col-panel -->
    </div>
    <div id="panelOne" class="panel-collapse collapse">
        <div class="panel-body">

            <div class="panel-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
            </div>
        </div>
    </div>
</div>
<!--end: panel -->

<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
    <div class="panel-heading">
        <div class="l-col-panel">
            <div class="panel-title__wrapper">
                <div class="accordion__text">
                    <!--panel title -->
                    <h3 class="title-3">Title</h3>
                </div>
            </div>
            <div class="accordion-toggle__angle-icon">
                <!-- angle icon -->
                <i class="accordion__angle fa fa-angle-down"></i>
            </div>
        </div>
        <!-- /.l-col-panel -->
    </div>
    <div id="panelTwo" class="panel-collapse collapse">
        <div class="panel-body">

            <div class="panel-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
            </div>
        </div>
    </div>
</div>
<!--end: panel -->

<!-- panel -->
<div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse">
    <div class="panel-heading">
        <div class="l-col-panel">
            <div class="panel-title__wrapper">
                <div class="accordion__text">
                    <!--panel title -->
                    <h3 class="title-3">Title</h3>
                </div>
            </div>
            <div class="accordion-toggle__angle-icon">
                <!-- angle icon -->
                <i class="accordion__angle fa fa-angle-down"></i>
            </div>
        </div>
        <!-- /.l-col-panel -->
    </div>
    <div id="panelThree" class="panel-collapse collapse">
        <div class="panel-body">

            <div class="panel-content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p>
            </div>
        </div>
    </div>
</div>
<!--end: panel -->

jQuery: jQuery：

  $('.panel-collapse').on('shown.bs.collapse', function () {
  console.log('OPEN')
});

$('.panel-collapse').on('hidden.bs.collapse', function () {
  console.log('CLOSED')
});

1 个解决方案

解决方案1
 1 已采纳  2020-03-16 15:42:27

 $('#panelOne').on('shown.bs.collapse', function () { let itemsList = document.getElementsByClassName('panel-collapse'); let isOpen = []; for (let item of itemsList) { if (item.classList.contains('in')) { isOpen.push(true) } else { isOpen.push(false) } } let allOpen = !isOpen.includes(false) console.log(allOpen) })
 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags --> <title>Bootstrap 101 Template</title> <!-- Bootstrap --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous"> <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!-- panel --> <div class="panel accordion-toggle" href="#panelOne" data-toggle="collapse"> <div class="panel-heading"> <div class="l-col-panel"> <div class="panel-title__wrapper"> <div class="accordion__text"> <!--panel title --> <h3 class="title-3">Title</h3> </div> </div> <div class="accordion-toggle__angle-icon"> <!-- angle icon --> <i class="accordion__angle fa fa-angle-down"></i> </div> </div> <!-- /.l-col-panel --> </div> <div id="panelOne" class="panel-collapse collapse"> <div class="panel-body"> <div class="panel-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p> </div> </div> </div> </div> <!--end: panel --> <!-- panel --> <div class="panel accordion-toggle" href="#panelTwo" data-toggle="collapse"> <div class="panel-heading"> <div class="l-col-panel"> <div class="panel-title__wrapper"> <div class="accordion__text"> <!--panel title --> <h3 class="title-3">Title</h3> </div> </div> <div class="accordion-toggle__angle-icon"> <!-- angle icon --> <i class="accordion__angle fa fa-angle-down"></i> </div> </div> <!-- /.l-col-panel --> </div> <div id="panelTwo" class="panel-collapse collapse"> <div class="panel-body"> <div class="panel-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p> </div> </div> </div> </div> <!--end: panel --> <!-- panel --> <div class="panel accordion-toggle" href="#panelThree" data-toggle="collapse"> <div class="panel-heading"> <div class="l-col-panel"> <div class="panel-title__wrapper"> <div class="accordion__text"> <!--panel title --> <h3 class="title-3">Title</h3> </div> </div> <div class="accordion-toggle__angle-icon"> <!-- angle icon --> <i class="accordion__angle fa fa-angle-down"></i> </div> </div> <!-- /.l-col-panel --> </div> <div id="panelThree" class="panel-collapse collapse"> <div class="panel-body"> <div class="panel-content"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consectetur, voluptate!</p> </div> </div> </div> </div> <!--end: panel --> <!-- jQuery (necessary for Bootstrap's JavaScript plugins) --> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script> <!-- Include all compiled plugins (below), or include individual files as needed --> <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script> </body> </html>

You can check if the class in is exist or not.您可以检查类in存在与否是。

暂无
暂无

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

相关问题 关闭所有自举手风琴 - Close all bootstrap accordions “全部打开”嵌套的jQuery手风琴 - 'Open All' nested jQuery accordions 设置手风琴以打开所有手风琴 - Set Accordion to Open All Accordions 如何同时打开所有 Bootstrap 5 手风琴而不关闭已经打开的手风琴 - How to open all the Bootstrap 5 accordions simultaneously without closing the ones that were already open 嵌套引导程序 5 手风琴不会折叠打开的面板 - Nested bootstrap 5 accordions not collapsing open panels Bootstrap-折叠所有手风琴并单击显示 - Bootstrap - Collapse all accordions and show clicked Bootstrap 在按钮单击时折叠所有手风琴 - Bootstrap collapse all accordions on button click 多个手风琴均默认打开标签 - Multiple accordions all with tabs open by default 修改 Twitter Bootstrap collapse 插件保持手风琴打开 - Modify Twitter Bootstrap collapse plugin to keep accordions open 如何将Angular UI Bootstrap手风琴分成多个列？ - How do I split Angular UI Bootstrap accordions into multiple columns?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM