У меня есть вид со списком карт. Если пользователь нажимает на карту, остальные карты должны скрываться. Как только карта, по которой щелкнули, раскрывается, появляется кнопка «Назад», на которой отображаются все остальные карты.
Проблема, с которой я столкнулся, заключается в том, что кнопка «Назад» находится внутри класса «j-card» и, следовательно, запускает этот первый фрагменткод.
<div class="card stack-card j-card ">
<div class="card-body">
<h5 class="card-title" style="">Activity 1</h5>
<div class="j-measurements">
<div class="card--label"><span>Time: 10 min</span></div>
<div class="card--label"><span>Start: 8:45</span></div>
</div>
<div class="btn j-btn" style="display: none;">Back</div>
</div>
</div>
<div class="card stack-card j-card" >
<div class="card-body">
<h5 class="card-title">Activity 2</h5>
<div class="j-measurements">
<div class="card--label"><span>Time: 10 min</span></div>
<div class="card--label"><span>Start: 8:45</span></div>
</div>
<div class="btn j-btn" style="display: none;">Back</div>
</div>
</div>
<div class="card stack-card j-card" >
<div class="card-body">
<h5 class="card-title">Activity3</h5>
<div class="j-measurements">
<div class="card--label"><span>Time: 10 min</span></div>
<div class="card--label"><span>Start: 8:45</span></div>
</div>
<div class="btn j-btn" style="display: none;">Back</div>
</div>
</div>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/bootstrap.min.js"></script>
<script>
$().ready(function(){
$('.j-card').on('click', function(e) {
$('.j-card').not(this).slideUp('fast');
$('.j-measurements').slideUp('fast');
$('.j-btn', this).toggle();
});
$('.j-btn').on('click', function(e) {
$('.j-card').show();
});
});
</script>
Пользователь должен увидеть список карточек. Пользователь может нажать на карту, на карте будет отображаться больше информации и кнопка возврата / закрытия, остальные карты будут скрыты. После щелчка карта станет похожей на другие карты, и другие карты снова появятся.