#bootstrap-4
#bootstrap-4
Вопрос:
Я использую аккордеоны bootstrap 4 в своем проекте, но закрытые вкладки не отображаются, когда я нажимаю на них на веб-странице, я использовал код bootstrap 4, но не могу решить эту проблему. Как я могу решить эту проблему, любая помощь будет оценена
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="card">
<div class="card-header" role="tab" id="peterhead">
<h3 class="mb-0">
<a data-toogle="collapse" data-target="#peter">
Peter Pan <small>Chief Epicurious Officer</small>
</a>
</h3>
</div>
<div class="collapse show" id="peter" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">Demo Text</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="dannyhead">
<h3 class="mb-0">
<a class="collapsed" data-toogle="collapse" data-target="#danny">
Dhanasekaran Witherspoon <small>Chief Food Officer</small>
</a>
</h3>
</div>
<div class="collapse" id="danny" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">Demo Text</em></p>
</div>
</div>
</div> Ответ №1:
Вот так: Codepen.
Это была опечатка в вашем коде data-toogle вместо data-toggle
<div class="accordion" id="accordion">
<div class="card">
<div class="card-header" role="tab" id="peterhead">
<h3 class="mb-0">
<button type=button data-toggle="collapse" data-target="#peter">
Peter Pan <small>Chief Epicurious Officer</small>
</button>
</h3>
</div>
<div class="collapse show" id="peter" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">Our CEO, Peter, credits his hardworking East Asian immigrant parents who undertook the arduous journey to the shores of America with the intention of giving their children the best future. His mother's wizardy in the kitchen whipping up the tastiest dishes with whatever is available inexpensively at the supermarket, was his first inspiration to create the fusion cuisines for which <em>The Frying Pan</em> became well known. He brings his zeal for fusion cuisines to this restaurant, pioneering cross-cultural culinary connections.</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="dannyhead">
<h3 class="mb-0">
<button type=button class="collapsed" data-toggle="collapse" data-target="#danny">
Dhanasekaran Witherspoon <small>Chief Food Officer</small>
</button>
</h3>
</div>
<div class="collapse" id="danny" data-parent="#accordion">
<div class="card-body">
<p class="d-none d-sm-block">Our CFO, Danny, as he is affectionately referred to by his colleagues, comes from a long established family tradition in farming and produce. His experiences growing up on a farm in the Australian outback gave him great appreciation for varieties of food sources. As he puts it in his own words, <em>Everything that runs, wins, and everything that stays, pays!</em></p>
</div>
</div>
</div>
</div>
Ответ №2:
вы забыли добавить в начале аккордеона. ваш идентификатор, цель данных также не совпадали, поэтому он не работал
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" role="tab" id="peterhead">
<h3 class="mb-0">
<a data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne" data-target="#peter">
Peter Pan <small>Chief Epicurious Officer</small>
</a>
</h3>
</div>
<div class="collapse show" id="collapseOne" aria-labelledby="peterhead" data-parent="#accordionExample">
<div class="card-body">
<p class="d-none d-sm-block">Demo Text</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="dannyhead">
<h3 class="mb-0">
<a class="collapsed" data-toggle="collapse" aria-expanded="true" aria-controls="collapseOne" data-target="#peter" data-toogle="collapse" data-target="#danny">
Dhanasekaran Witherspoon <small>Chief Food Officer</small>
</a>
</h3>
</div>
<div class="collapse" id="peter" aria-labelledby="dannyhead" data-parent="#accordionExample">
<div class="card-body">
<p class="d-none d-sm-block">Demo Text</em></p>
</div>
</div>
</div>
</div> Ответ №3:
это data-toggle
<div class="card">
<div class="card-header" role="tab" id="peterhead">
<h3 class="mb-0">
<a data-toggle="collapse" data-target="#peter">
Peter Pan <small>Chief Epicurious Officer</small>
</a>
</h3>
</div>
<div class="collapse show" id="peter">
<div class="card-body">
<p class="d-none d-sm-block">Demo Text</p>
</div>
</div>
</div>
<div class="card">
<div class="card-header" role="tab" id="dannyhead">
<h3 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-target="#danny">
Dhanasekaran Witherspoon <small>Chief Food Officer</small>
</a>
</h3>
</div>
<div class="collapse" id="danny">
<div class="card-body">
<p class="d-none d-sm-block">Demo Text</em></p>
</div>
</div>
</div>