嵌套Bootstrap可折叠按钮的jQuery show.bs.collapse事件在比预期更多的按钮上触发 [英] jQuery show.bs.collapse event for nested Bootstrap collapsible buttons fires on more buttons than expected

查看：63
本文介绍了嵌套Bootstrap可折叠按钮的jQuery show.bs.collapse事件在比预期更多的按钮上触发的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在使用Bootstrap来制作可折叠的嵌套div/按钮.我要在div展开时折叠div的所有同级，并在它折叠时折叠div的所有子级(以便展开的div仅从根div之一到内部div的一条路径).

我选择使用jQuery而不是使用Bootstrap的手风琴-只是带有相关div的按钮.

所以我尝试选择所有可以扩展的div并使用show.bs.collapse事件，这样我就知道哪个div被扩展了.

$(function () {
  $(".collapse").on('show.bs.collapse', function () {
    console.log ($(this).context.id);
  })
});

如果我的树是这样的:

  • 1-展开

    • 2-展开

      • 3-塌陷

    • 4-折叠

  • 5-折叠

  • 6-折叠

我展开了3，却没有得到:

3

但是:

3
2
1

为什么show.bs.collapse应用于div 1和div 2?

解决方案

尝试

 $(function() {
  $(".collapse").on('show.bs.collapse', function(e) {
    if ($(this).is(e.target)) {
      snippet.log(this.id)
    }
  })
}); 

 <!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div class="panel-group" id="accordion1-1" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne-1">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion1-1" href="#collapseOne-1" aria-expanded="true" aria-controls="collapseOne">
                  Collapsible Group Item #1-1
                </a>
              </h4>
            </div>
            <div id="collapseOne-1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne-1">
              <div class="panel-body">
                Collapsible Group Item #1-1
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo-1">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1" href="#collapseTwo-1" aria-expanded="false" aria-controls="collapseTwo">
                  Collapsible Group Item #2-1
                </a>
              </h4>
            </div>
            <div id="collapseTwo-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo-1">
              <div class="panel-body">
                <div class="panel-group" id="accordion1-1-2" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne-1-2">
                      <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion1-1-2" href="#collapseOne-1-2" aria-expanded="true" aria-controls="collapseOne">
                          Collapsible Group Item #1-1-2
                        </a>
                      </h4>
                    </div>
                    <div id="collapseOne-1-2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne-1-2">
                      <div class="panel-body">
                        Collapsible Group Item #1-1-2
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo-1-2">
                      <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1-2" href="#collapseTwo-1-2" aria-expanded="false" aria-controls="collapseTwo">
                          Collapsible Group Item #2-1-2
                        </a>
                      </h4>
                    </div>
                    <div id="collapseTwo-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo-1-2">
                      <div class="panel-body">
                        Collapsible Group Item #2-1-2
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree-1-2">
                      <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1-2" href="#collapseThree-1-2" aria-expanded="false" aria-controls="collapseThree-1-2">
                          Collapsible Group Item #3-1-2
                        </a>
                      </h4>
                    </div>
                    <div id="collapseThree-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree-1-2">
                      <div class="panel-body">
                        Collapsible Group Item #3-1-2
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree-1">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1" href="#collapseThree-1" aria-expanded="false" aria-controls="collapseThree-1">
                  Collapsible Group Item #3-1
                </a>
              </h4>
            </div>
            <div id="collapseThree-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree-1">
              <div class="panel-body">
                Collapsible Group Item #3-1
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Collapsible Group Item #2
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Collapsible Group Item #3
      </div>
    </div>
  </div>
</div>

I'm using Bootstrap to make collapsible nested divs/buttons. I want to collapse all siblings of a div when it is expanded and to collapse all children of a div when it is collapsed (so that the expanded divs are from only one path from one of the root divs to an inner div).

I choose to do it with jQuery and not using Bootstrap's Accordion - just buttons with associated divs.

So I tried to select all divs that could expand and use the show.bs.collapse event, so that I would know which div was expanded.

$(function () {
  $(".collapse").on('show.bs.collapse', function () {
    console.log ($(this).context.id);
  })
});

If my tree is like so:

  • 1 - expanded

    • 2 - expanded

      • 3 - collapsed

    • 4 - collapsed

  • 5 - collapsed

  • 6 - collapsed

and I expand 3, I don't get:

3

but:

3
2
1

Why is show.bs.collapse applied to divs 1 and 2?

解决方案

Try

$(function() {
  $(".collapse").on('show.bs.collapse', function(e) {
    if ($(this).is(e.target)) {
      snippet.log(this.id)
    }
  })
});

<!-- Provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

<script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap-theme.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/js/bootstrap.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingOne">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
      <div class="panel-body">
        <div class="panel-group" id="accordion1-1" role="tablist" aria-multiselectable="true">
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingOne-1">
              <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion1-1" href="#collapseOne-1" aria-expanded="true" aria-controls="collapseOne">
                  Collapsible Group Item #1-1
                </a>
              </h4>
            </div>
            <div id="collapseOne-1" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne-1">
              <div class="panel-body">
                Collapsible Group Item #1-1
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingTwo-1">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1" href="#collapseTwo-1" aria-expanded="false" aria-controls="collapseTwo">
                  Collapsible Group Item #2-1
                </a>
              </h4>
            </div>
            <div id="collapseTwo-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo-1">
              <div class="panel-body">
                <div class="panel-group" id="accordion1-1-2" role="tablist" aria-multiselectable="true">
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingOne-1-2">
                      <h4 class="panel-title">
                        <a role="button" data-toggle="collapse" data-parent="#accordion1-1-2" href="#collapseOne-1-2" aria-expanded="true" aria-controls="collapseOne">
                          Collapsible Group Item #1-1-2
                        </a>
                      </h4>
                    </div>
                    <div id="collapseOne-1-2" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne-1-2">
                      <div class="panel-body">
                        Collapsible Group Item #1-1-2
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingTwo-1-2">
                      <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1-2" href="#collapseTwo-1-2" aria-expanded="false" aria-controls="collapseTwo">
                          Collapsible Group Item #2-1-2
                        </a>
                      </h4>
                    </div>
                    <div id="collapseTwo-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo-1-2">
                      <div class="panel-body">
                        Collapsible Group Item #2-1-2
                      </div>
                    </div>
                  </div>
                  <div class="panel panel-default">
                    <div class="panel-heading" role="tab" id="headingThree-1-2">
                      <h4 class="panel-title">
                        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1-2" href="#collapseThree-1-2" aria-expanded="false" aria-controls="collapseThree-1-2">
                          Collapsible Group Item #3-1-2
                        </a>
                      </h4>
                    </div>
                    <div id="collapseThree-1-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree-1-2">
                      <div class="panel-body">
                        Collapsible Group Item #3-1-2
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="headingThree-1">
              <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion1-1" href="#collapseThree-1" aria-expanded="false" aria-controls="collapseThree-1">
                  Collapsible Group Item #3-1
                </a>
              </h4>
            </div>
            <div id="collapseThree-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree-1">
              <div class="panel-body">
                Collapsible Group Item #3-1
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingTwo">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
      <div class="panel-body">
        Collapsible Group Item #2
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="headingThree">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
      <div class="panel-body">
        Collapsible Group Item #3
      </div>
    </div>
  </div>
</div>

这篇关于嵌套Bootstrap可折叠按钮的jQuery show.bs.collapse事件在比预期更多的按钮上触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆