[英]Accordion doesn't work in Bootstrap 4 collapse
https://fiddle.jshell.net/8v72rtxb/
我有以下代碼。
<div class="menu-horizontal container">
<div class="row menu-container" id="menu">
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#studies-collapse" aria-expanded="false" aria-controls="collapseExample">
Studies
</a>
<div class="collapse" id="studies-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
<div class="col-md-3 menu-item">
<a data-toggle="collapse" class="collapsed collapse-toggle" data-parent="#menu" href="#research-collapse" aria-expanded="false" aria-controls="collapseExample">
Research
</a>
<div class="collapse" id="research-collapse">
<div class="container">
<div class="row">
Something...
</div>
</div>
</div>
</div>
</div>
</div>
我不知道為什么 data-parent 不起作用。 展開一個折疊 div 不會關閉另一個折疊。 我試圖從bootstrap的例子中復制代碼,但它仍然不起作用。 同樣在我的項目中,我在bootstrap.min.js
之前包含jquery.js
。 我檢查了其他一些問題,他們說bootstrap.min.js
可能被包含了兩次。 但事實應該如此嗎?
謝謝閱讀!
我想到了一個解決方法。 即使不使用data-parent
屬性。 https://fiddle.jshell.net/zyd1vL4o/
$(document).ready(function(){
$('.collapse').on('show.bs.collapse', function (e) {
$('.collapse').collapse("hide")
})
})
一旦通過這個jsfiddle
這是html代碼,
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card">
<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">
Studies
</a>
</h5>
</div>
<div id="collapseOne" class="collapse " role="tabpanel" aria-labelledby="headingOne">
<div class="card-block">
<div id="studies-collapse">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="" class="menu-subitem">
Study Guides
</a>
<a href="" class="menu-subitem">
Counselling and Instructions
</a>
<a href="" class="menu-subitem">
Student Laboratory
</a>
<a href="" class="menu-subitem">
Student Exchange
</a>
</div>
<div class="col-md-3">
<a href="" class="menu-subitem">
Post‐graduate studies
</a>
<a href="" class="menu-subitem">
Theses
</a>
<a href="" class="menu-subitem">
Exams
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<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">
Research
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div id="research-collapse">
<div class="container">
<div class="row">
<div class="col-md-3">
<a href="" class="menu-subitem">
Study Guides
</a>
<a href="" class="menu-subitem">
Counselling and Instructions
</a>
<a href="" class="menu-subitem">
Student Laboratory
</a>
<a href="" class="menu-subitem">
Student Exchange
</a>
</div>
<div class="col-md-3">
<a href="" class="menu-subitem">
Post‐graduate studies
</a>
<a href="" class="menu-subitem">
Theses
</a>
<a href="" class="menu-subitem">
Exams
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
采用:
<div class="menu-horizontal container"> <div class="row menu-container" id="menu"> <div class="col-md-3 menu-item"> <a data-toggle="collapse" class="collapsed" data-target="#studies-collapse" href="#studies-collapse" aria-expanded="false" aria-controls="studies-collapse"> Studies </a> <div class="collapse" id="studies-collapse" data-parent="#menu"> <div class="container"> <div class="row"> Something... </div> </div> </div> </div> <div class="col-md-3 menu-item"> <a data-toggle="collapse" class="collapsed" data-target="#research-collapse" href="#research-collapse" aria-expanded="false" aria-controls="research-collapse"> Research </a> <div class="collapse" id="research-collapse" data-parent="#menu"> <div class="container"> <div class="row"> Something... </div> </div> </div> </div> </div> </div>
import 'bootstrap/js/dist/collapse';
將其包含在您的文件中,折疊應該會起作用。
如果它沒有關閉,那么你可能沒有正確鏈接到你的bootstrap js。 你不需要添加任何額外的東西。 檢查以下js文件:
如果您正在創建引導主題,那么在函數中執行以下操作:
wp_register_script( 'write your theme name here', get_template_directory_uri() . '/bootstrap/js/bootstrap.min.js', array( 'jquery' ) );
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.