文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >检查并做一些事情，如果所有的引导手风琴是打开的。

问检查并做一些事情，如果所有的引导手风琴是打开的。
EN

Stack Overflow用户
提问于 2020-03-16 14:36:20
回答 1查看 1.3K关注 0票数 0

我有一个引导手风琴和一个“打开所有”，“关闭所有”按钮，这很好，但我要做的是，当手风琴都是手动打开，而不是由打开所有，关闭所有按钮有按钮更改为“关闭所有”。有没有办法检查手风琴是否全部打开，这样我就可以添加按钮功能了？我知道您可以使用shown.bs.collapse和hidden.bs.collapse来查看手风琴是否打开，但是如何检查是否全部打开？

代码语言：javascript
复制
<!-- 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：

代码语言：javascript
复制
  $('.panel-collapse').on('shown.bs.collapse', function () {
  console.log('OPEN')
});

$('.panel-collapse').on('hidden.bs.collapse', function () {
  console.log('CLOSED')
});
jquery
twitter-bootstrap
javascript
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-03-16 15:42:27

​

代码语言：javascript
复制
$('#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)
})
代码语言：javascript
复制
<!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是否存在。

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/60707911

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档