在我的代码中，我试图设计一个电子商务结账页面。第一个面板将被打开，当第一步完成并单击动作按钮时，它将解冻下一个面板，依此类推。但不知怎的，我在做错误所以它没有成功。
$(document).ready(function() {
$('.action').click(function() {
var tab_id = $(this).attr('href');
$('#' + tab_id).parent('.card').removeClass('NotactiveDiv').addClass('activeDiv');
});
});.card:last-child {
border-bottom: 0px;
}
.card:last-child .card-header {
border-bottom: 0px solid #d7d7d7;
}
.card {
border: none;
outline: none;
border-bottom: 2px solid #d7d7d7;
}
.card h5 a {
color: #616161;
outline: none;
font-weight: 400;
font-size: 24px;
}
.card h5 a:hover {
color: #616161;
text-decoration: none;
outline: none;
}
.card h5 {
outline: none;
}
.card-header {
padding: .75rem 1.25rem;
margin-bottom: 0;
background-color: #fff;
border-bottom: 0px solid #d7d7d7;
outline: none;
}
.NotactiveDiv {
pointer-events: none;
}<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card activeDiv">
<div class="card-header" role="tab" id="headingOne">
<h5 class="mb-0">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
1. Account Verification <span><img src="img/greentick.png"> </span>
</a>
</h5>
</div>
<div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.<br/>
<a data-toggle="collapse" href="#collapseTwo" class="action">
ACTIONS
</a>
</div>
</div>
</div>
<div class="card NotactiveDiv">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
2. Delivery Details <span><img src="img/greentick.png"> </span>
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.<br/>
<a data-toggle="collapse" href="#collapseThree" class="action">
ACTIONS
</a>
</div>
</div>
</div>
<div class="card NotactiveDiv">
<div class="card-header" role="tab" id="headingThree">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
3. Payment Method <span><img src="img/greentick.png"> </span>
</a>
</h5>
</div>
<div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.<br/>
<a data-toggle="collapse" href="collapseFour" class="action">
ACTIONS
</a>
</div>
</div>
</div>
<div class="card NotactiveDiv">
<div class="card-header" role="tab" id="headingFour">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
4. Review Order <span><img src="img/greentick.png"> </span>
</a>
</h5>
</div>
<div id="collapseFour" class="collapse" role="tabpanel" aria-labelledby="collapseFour">
<div class="card-block">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird
on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.<br/>
<a data-toggle="collapse" href="#" class="action">
ACTIONS
</a>
</div>
</div>
</div>
</div>
请帮助我。我想在点击当前面板的操作按钮时打开下一个面板，当前面板将关闭。
答案 0 :(得分：1)
可能必须存在某些东西。
话虽如此，您的代码应该像这样工作：
$('.action').click(function(){
$(this).closest(".card")
.removeClass('activeDiv')
.addClass('NotactiveDiv')
.children('.collapse').removeClass('show');
$(this).closest(".card").next('.card')
.removeClass('NotactiveDiv')
.addClass('activeDiv');
});