javascript - 防止嵌套链接展开/折叠

Question

我有一个使用 Bootstrap 的网页。在此页面中，我使用 Collapse 组件来切换某些元素的可见性。在每个折叠组件中，我都有一些链接和按钮。如果用户点击其中一个链接或按钮，我不希望相关内容展开折叠。

我有一把 fiddle here ，其中包含以下内容:

<div class="container">
  <div class="row" data-toggle="collapse" data-target="#parent1">
    <div class="col-xs-8">
      <h2>Parent 1</h2>     
    </div>
    <div class="col-xs-4">
      <ul class="list-inline">
        <li><a href="#" onclick="return onDetailsClick();">details</a></li>
        <li><button onclick="return onRunClick()">Run</button></li>
      </ul>
    </div>
  </div>

  <div class="row" id="parent1" class="collapse">
    <div class="col-xs-12">
      <h3><small>Children</small></h3>
    </div>
  </div>


  <div class="row" data-toggle="collapse" data-target="#parent2">
    <div class="col-xs-8">
      <h2>Parent 2</h2>     
    </div>
    <div class="col-xs-4">
      <ul class="list-inline">
        <li><a href="#" onclick="return onDetailsClick();">details</a></li>
        <li><button onclick="return onRunClick()">Run</button></li>
      </ul>
    </div>
  </div>

  <div class="row" id="parent2" class="collapse">
    <div class="col-xs-12">
      <h3><small>Children</small></h3>    
    </div>
  </div>


  <div class="row" data-toggle="collapse" data-target="#parent3">
    <div class="col-xs-8">
      <h2>Parent 3</h2>     
    </div>
    <div class="col-xs-4">
      <ul class="list-inline">
        <li><a href="#" onclick="return onDetailsClick();">details</a></li>
        <li><button onclick="return onRunClick()">Run</button></li>
      </ul>
    </div>
  </div>

  <div class="row" id="parent3" class="collapse">
    <div class="col-xs-12">
      <h3><small>Children</small></h3>    
    </div>  
  </div>
</div>

尽管我在事件处理程序中返回 false，但事件似乎以某种方式在链中上升。我不确定如何解决这个问题。任何帮助表示赞赏。

Answer 1

您只需要将“折叠属性”移动到 h2 而不是包含链接的 div 容器，就像这样:

<div class="container">
    <div class="row">
        <div class="col-xs-8">
            <h2 data-toggle="collapse" data-target="#parent1">Parent 1</h2>
        </div>
        <div class="col-xs-8">
           <ul class="list-inline">
           <li><a href="#" onclick="return onDetailsClick();">details</a></li>
           <li><button onclick="return onRunClick()">Run</button></li>
        </ul>
        </div>
    </div>
</div>