Bootstrap 4使导航标签折叠与卡片手风琴

Question

作为小提琴https://jsfiddle.net/dominijk/bLpach25/1/

我在手风琴上有一系列的卡片，当另一张卡片打开时，这些卡片就会折叠起来。我可以把标签放在卡片里，起标签的作用。

我想做的是将导航标签链接到卡片折叠

即。如果你点击导航选项卡，则会显示选项卡内容，其他卡会折叠，反之，如果打开另一张卡，则选项卡内容会折叠。

<div id="accordion3">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseA">
Colour map 
</a>
<!-- Ultimately add collapse all here as https://codepen.io/dominijk/pen/JejNpp-->
</div>
<div id="collapseA" class="collapse show" data-parent="#accordion3">
<div class="card-body" id=menu>
<fieldset>
<input id='radioOne' type='radio' name='rtoggle' value='radioOne'>
<label for='radioOne'>One</label><br>
<input id='radioTwo' type='radio' name='rtoggle' value='radioTwo'>
<label for='radioTwo'>Two</label><br>
<input id='radioThree' type='radio' name='rtoggle' value='radioThree' checked='checked'>
<label for='radioThree'>Three</label><br>
</fieldset>
</div>
</div>
</div>
<div id="accordion2">
<div class="card">
<div class="card-header collapse show">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseB">  
Filter features by
</a>
<ul class="nav nav-tabs">
<li class="collapsed card-link"><a class="nav-link" data-toggle="tab" 
href="#tab-1" role="tab">Tab 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab- 
2" role="tab">Tab 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3" role="tab">Tab 3</a></li>
</ul>
<div id="collapseB" class="card card-tabs-1" data-parent="#accordion2">
<div class="card-block">
<div class="tab-content">
<div class="tab-pane active" id="tab-1" data-parent="#accordion2">
<h4 class="card-title">Tab 1</h4>
<p class="card-text">Content.</p>
</div>
<div class="tab-pane" id="tab-2">
<h4 class="card-title">Tab 2</h4>
<p class="card-text">Content.</p>
</div>
<div class="tab-pane" id="tab-3">
<h4 class="card-title">Tab 3</h4>
<p class="card-text">Content</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseC">
Show boundaries for
</a>
</div>
<div id="collapseC" class="collapse" data-parent="#accordion2">
<div class="card-body">
Card content can be <br>
<span> span </span>
<div> div </div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseD">
Another panel
</a>
</div>
<div id="collapseD" class="collapse" data-parent="#accordion2">
<div class="card-body">
Card content can be <br>
<span> span </span>
<div> div </div>
</div>
</div>
</div>
</div>
</div>

Answer 1

$(document).ready(function() {
$('.nav-link').on('click', function() {
if (!$('#collapseB').hasClass('show')) {
$('#collapseB').collapse('toggle')
}
})
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link href="http://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" rel="stylesheet"/>
</script>
<div id="accordion3">
<div class="card">
<div class="card-header">
<a class="card-link" data-toggle="collapse" href="#collapseA">Colour map</a>
</div>
<div id="collapseA" class="collapse show" data-parent="#accordion3">
<div class="card-body" id=menu>
<fieldset>
<input id='radioOne' type='radio' name='rtoggle' value='radioOne'>
<label for='radioOne'>One</label><br>
<input id='radioTwo' type='radio' name='rtoggle' value='radioTwo'>
<label for='radioTwo'>Two</label><br>
<input id='radioThree' type='radio' name='rtoggle' value='radioThree' checked='checked'>
<label for='radioThree'>Three</label><br>
</fieldset>
</div>
</div>
</div>
<div class="card">
<div class="card-header ">
<a class=" card-link" data-toggle="collapse" href="#collapseB">
Filter features by
</a>
<ul class="nav nav-tabs" id="features">
<li class=" card-link"><a class="nav-link" data-toggle="tab" href="#tab-1" role="tab">Tab 1</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-2" role="tab">Tab 2</a></li>
<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#tab-3" role="tab">Tab 3</a></li>
</ul>
<div id="collapseB" class="card collapse" data-parent="#accordion3">
<div class="card-block">
<div class="tab-content">
<div class="tab-pane active" id="tab-1">
<h4 class="card-title">Tab 1</h4>
<p class="card-text">Libero at quibusdam autem magnam necessitatibus, ullam nisi quo, architecto molestias reprehenderit neque porro velit deleniti ipsa mollitia pariatur! Expedita, eius repudiandae.</p>
</div>
<div class="tab-pane" id="tab-2">
<h4 class="card-title">Tab 2</h4>
<p class="card-text">Magni autem a perferendis tempore perspiciatis aspernatur sapiente fuga deserunt dignissimos consequuntur maiores aliquid hic, in pariatur, officiis repellat voluptatum provident blanditiis.</p>
</div>
<div class="tab-pane" id="tab-3">
<h4 class="card-title">Tab 3</h4>
<p class="card-text">Odio, facilis, vel eum nam architecto maxime consequuntur consectetur et qui eveniet alias minus provident suscipit delectus odit cupiditate similique fuga vero!</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseC">
Show boundaries for
</a>
</div>
<div id="collapseC" class="collapse" data-parent="#accordion3">
<div class="card-body">
Card content can be <br>
<span> span </span>
<div> div </div>
</div>
</div>
</div>
<div class="card">
<div class="card-header">
<a class="collapsed card-link" data-toggle="collapse" href="#collapseD">
Another panel
</a>
</div>
<div id="collapseD" class="collapse" data-parent="#accordion3">
<div class="card-body">
Card content can be <br>
<span> span </span>
<div> div </div>
</div>
</div>
</div>
</div>

Fiddle