点击两次后，两个div都隐藏使用切换jQuery

Question

在Bootstrapcard中，我添加了两个card-body和一个按钮，单击它隐藏其中一个。

期望行为是用户每次点击按钮，11111卡出现，2222卡消失。如果再次点击按钮，2222出现，11111卡片消失等…

我已经编写了以下代码，在第二次单击中完全隐藏了两个div…我遗漏了什么?

$(".toggle-executed").on('click', function(e) {
$(this).closest(".card-body").slideToggle('slow', function() {
$(this).closest(".card-body").toggleClass("d-none");
});

$(this).closest(".card-body").siblings(".card-body").toggleClass("d-none");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12 my-3">
<div class="card border-left-success">
<div class="card-body action-info">
<div class="row align-items-center">
<div class="col-11">
<div class="row">
1111
</div>
</div>
<div class="col-1 mx-auto text-center">
<button class="btn btn-primary toggle-executed">btn</button>
</div>
</div>
</div>
<div class="card-body executed-info d-none">
<div class="row align-items-center">
<div class="col-11">
<div class="row">
2222
</div>
</div>
<div class="col-1 mx-auto text-center">
<button class="btn btn-primary toggle-executed">btn</button>
</div>
</div>
</div>
</div>
</div>

Answer 1

您的问题是slideToggle('slow'将display:none直接应用于元素，而不是使用d-none类。

所以当你点击btn2, btn1确实有类d-none被删除，但仍然是display:none的元素，所以不显示。

如果你想保留.slideToggle，那么你可以在添加d-none之后添加.show()-它不会显示，因为d-none，但会删除slideToggle应用的display:none:

$(this).closest(".card-body").toggleClass("d-none").show();

作为奖励，如果您使用appendTo将元素移动到父元素的末尾，那么它们将"循环"。视觉上正确，但取决于您的要求。

$(".toggle-executed").on('click', function(e) {
$(this).closest(".card-body").slideToggle('slow', function() {
var cardbody = $(this).closest(".card-body")
cardbody.toggleClass("d-none").show();
cardbody.appendTo(cardbody.parent())
});

$(this).closest(".card-body").siblings(".card-body").toggleClass("d-none");
});

.d-none {
displain: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/4.6.2/css/bootstrap.min.css" rel="stylesheet" />

<div class="col-12 my-3">
<div class="card border-left-success">
<div class="card-body action-info">
<div class="row align-items-center">
<div class="col-11">
<div class="row">
1111
</div>
</div>
<div class="col-1 mx-auto text-center">
<button class="btn btn-primary toggle-executed">btn</button>
</div>
</div>
</div>
<div class="card-body executed-info d-none">
<div class="row align-items-center">
<div class="col-11">
<div class="row">
2222
</div>
</div>
<div class="col-1 mx-auto text-center">
<button class="btn btn-primary toggle-executed">btn</button>
</div>
</div>
</div>
</div>
</div>