堆棧內存溢出
  簡體   English   中英

如果所有引導手風琴都打開，請檢查並執行某些操作

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

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

問題描述

我有一個引導手風琴和一個“全部打開”、“全部關閉”按鈕，它工作正常，但我想要做的是當手風琴全部手動打開而不是全部打開時，關閉所有按鈕改變按鈕“關閉所有”。 有沒有辦法檢查所有手風琴是否都打開，以便我可以添加按鈕功能？ 我知道您可以使用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：

  $('.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>

您可以檢查類in存在與否是。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 關閉所有自舉手風琴 “全部打開”嵌套的jQuery手風琴 設置手風琴以打開所有手風琴 如何同時打開所有 Bootstrap 5 手風琴而不關閉已經打開的手風琴 嵌套引導程序 5 手風琴不會折疊打開的面板 Bootstrap-折疊所有手風琴並單擊顯示 Bootstrap 在按鈕單擊時折疊所有手風琴 多個手風琴均默認打開標簽 修改 Twitter Bootstrap collapse 插件保持手風琴打開 如何將Angular UI Bootstrap手風琴分成多個列？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM