引导数据切换折叠不起作用。问题是当单击第二个链接时，第一个链接没有切换折叠
**Fiddle**
演示
试试吧。现在，如果您单击第二个链接，则第一个链接将折叠。
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css">
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div id="accordion">
<div class="card card-plain">
<div class="card-header" role="tab" id="heading1">
<a data-toggle="collapse" aria-expanded="true" aria-controls="collapse1" data-target="#collapse1">
Company Information
<i class="now-ui-icons arrows-1_minimal-down"></i>
</a>
</div>
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1" data-parent="#accordion">
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<label>Company Name</label>
<input class="form-control" id="comp_entity" name="comp_entity" type="text" placeholder="Company Name" value="">
</div>
<div class="col-sm-6">
<label>Business Unit / Division</label>
<input class="form-control" id="bus_unit_div" name="bus_unit_div" type="text" placeholder="Business Unit / Division" value="">
</div>
</div>
</div>
</div>
</div>
<div class="card card-plain">
<div class="card-header" role="tab" id="heading2">
<a class="collapsed" data-toggle="collapse" aria-expanded="false" aria-controls="collapse2" data-target="#collapse2">
Employee Information
<i class="now-ui-icons arrows-1_minimal-down"></i>
</a>
</div>
<div id="collapse2" class="collapse" role="tabpanel" aria-labelledby="heading2" data-parent="#accordion">
<div class="card-body">
<div class="row">
<div class="col-sm-6">
<label>Job title / role</label>
<input class="form-control" id="job_title" name="job_title" type="text" placeholder="Job Title / Role" value="">
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>Hours of Work</label>
<input class="form-control" id="hours_of_work" name="hours_of_work" type="text" placeholder="Hours of Work" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" value="">
</div>
<div class="col-sm-6">
<label>Performance Rating</label>
<input class="form-control" id="perform_rating" name="perform_rating" type="text" placeholder="Performance Rating" value="">
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<label>Personnel (Staff) Number</label>
<input class="form-control" id="personal_staff_num" name="personal_staff_num" type="text" placeholder="Personnel (Staff) number" onkeyup="this.value = this.value.replace(/[^0-9]/, '')" value="">
</div>
</div>
</div>
</div>
</div>
</body>
</html>否则
请删除第一个选项卡内容div 中的类显示
从
<div id="collapse1" class="collapse show" role="tabpanel" aria-labelledby="heading1">
自
<div id="collapse1" class="collapse" role="tabpanel" aria-labelledby="heading1">
它会起作用。
在下面的代码中使用"in"而不是"show">
<div id="collapse1" class="collapse in" role="tabpanel" aria-labelledby="heading1">