嵌套折叠每次调用父折叠答案

【问题标题】：Nested collapses calling parent collapse every time嵌套折叠每次调用父折叠
【发布时间】：2018-08-14 14:08:23
【问题描述】：

我搜索并找到了一些类似的答案 - 但那些是我没有使用的手风琴。

$('#collapseOutter').on('show.bs.collapse', function(event) {
  $('#collapseBtn').html("Show Less");
  console.log('Only happen when outter div is opened');
  event.stopPropagation();
  console.log('even with stopping propagation it fires');
})
$('#collapseOutter').on('hide.bs.collapse', function() {
  $('#collapseBtn').html("Show More");
  console.log('Only happen when outter div is collapsed');
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row ml-4">
    <div class="row header-div">
      <a id="collapseBtn" class="btn-info btn" data-toggle="collapse" href="#collapseOutter" role="button" aria-expanded="false" aria-controls="collapseOutter">
		  Show More
		</a>
    </div>
  </div>
  <div class="row ml-4">
    <div id="collapseOutter" class="collapse">
      <p>Here is a paragraph about the data you're about to see.</p>
      <div class="row">
        <div id="item-a">
          <a id="item-a" class="" data-toggle="collapse" href="#collapseInnerA">
						Item One of a list
					</a>
          <br />
          <div id="collapseInnerA" class="collapse">
            <div class="row">
              <p class="ml-4">Item One Related Information</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div id="item-b">
          <a id="item-b" class="" data-toggle="collapse" href="#collapseInnerB">
						Item Two of a list
					</a>
          <br />
          <div id="collapseInnerB" class="collapse">
            <div class="row">
              <p class="ml-4">Item Two Related Information</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

当我点击列表中的项目（在第一次折叠中）时，它会触发父方法。

当我单击列表项折叠/显示其信息时，如何防止父方法触发？

我正在寻找具体与引导相关的方法。

【问题讨论】：

How to stop events bubbling in jQuery?的可能重复
再次 - 我已经搜索过了。我看到它被称为“事件冒泡”，但这并不能帮助我解决与 Bootstrap 和折叠相关的问题。您提供的链接是针对自定义函数的 - 我将如何使用默认的 Bootstrap 函数来做到这一点？
你不能在你的事件函数中使用event.stopPropagation()吗？
我已将它包含在 .on('show.bs.collapse') 函数中，但它什么也没做。我将进行编辑以显示 - 我已将其包含在显示功能中，但它仍然会触发。
我知道我现在可以向内部元素添加一个类 - 并在应用到内部元素的类上调用 show 和 hide 时使用该 stopPropagation。它似乎可以解决问题。谢谢！

标签： jquery html css twitter-bootstrap bootstrap-4

【解决方案1】：

当事件传播到达外部崩溃时，您将停止它。你应该在内部崩溃时停止它。在this codepen 中，第一个内部崩溃的崩溃事件会在第二个停止时冒泡。

$('#collapseInnerB').on('show.bs.collapse', function( event ) {
    event.stopPropagation();
})
$('#collapseInnerB').on('hide.bs.collapse', function( event ) {
    event.stopPropagation();
})

【讨论】：