Question

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

我有一个小提琴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

你只需要移动＆＃34;折叠attributs＆＃34;到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>

Answer 2

您必须删除每行的切换属性并使用JavaScript手动启动效果，然后阻止var map = L.map('map').setView([42.35, -71.08], 13); L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png', { maxZoom: 18, attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="http://mapbox.com">Mapbox</a>', id: 'examples.map-i86nkdio', }).addTo(map);和<button>元素采取任何操作。

您的所有代码都是这样的

<强> HTML

<a>

<强>的JavaScript

<div class="container">
<div class="row row1">
<div class="col-xs-8">
  <h2>Parent 1</h2>     
</div>
<div class="col-xs-4">
  <ul class="list-inline">
    <li><a href="#">details</a></li>
    <li><button>Run</button></li>
  </ul>
</div>
</div>  
 <div class="row" id="parent1">
  <div class="col-xs-12">
   <h3><small>Children</small></h3>
   </div>
</div>
<div class="row row2">
 <div class="col-xs-8">
   <h2>Parent 2</h2>     
 </div>
 <div class="col-xs-4">
  <ul class="list-inline">
    <li><a href="#">details</a></li>
    <li><button>Run</button></li>
  </ul>
 </div>
 </div>
 <div class="row" id="parent2">
 <div class="col-xs-12">
   <h3><small>Children</small></h3>    
  </div>
</div>
<div class="row row3">
  <div class="col-xs-8">
    <h2>Parent 3</h2>     
  </div>
  <div class="col-xs-4">
    <ul class="list-inline">
     <li><a href="#">details</a></li>
     <li><button>Run</button></li>
    </ul>
  </div>
</div>

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

防止嵌套链接展开/折叠

2 个答案: