[英]Bootstrap 4 nested collapse "data-parent" not working
我想使用 折叠数据父选项。 我需要传统的手风琴行为:当显示可折叠项目时,应关闭指定父项下的所有可折叠元素。 但它不起作用。 我不知道这是因为我的嵌套折叠还是我做错了什么。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <div class="content-nav"> <a data-parent="#content-articles" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="content-nav__book_third" href="#content-nav__book_third" class="content-nav__book content-nav__book_third">3</a> <a data-parent="#content-articles" role="button" data-toggle="collapse" aria-expanded="false" aria-controls="content-nav__book_second" href="#content-nav__book_second" class="content-nav__book content-nav__book_second">2</a> <a data-parent="#content-articles" role="button" data-toggle="collapse" aria-expanded="true" aria-controls="content-nav__book_first" href="#content-nav__book_first" class="content-nav__book content-nav__book_first">1</a> </div> <!--.content-nav--> <div id="content-articles"> <div id="content-nav__book_third" class="content-article collapse"> <div id="content-article__info_third-1" class="content-article__info collapse"> Book 3 article 1 </div> <!--.content-article__info--> <div id="content-article__info_third-2" class="content-article__info collapse"> Book 3 article 2 </div> <!--.content-article__info--> <div id="content-article__info_third-3" class="content-article__info collapse"> Book 3 article 3 </div> <!--.content-article__info--> <div class="content-article__plan"> <a data-parent="#content-nav__book_third" data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_third-1" href="#content-article__info_third-1" class="content-article__plan-link content-article__plan-link_third-1">Link - Book 3 article 1</a> <a data-parent="#content-nav__book_third" data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_third-2" href="#content-article__info_third-2" class="content-article__plan-link content-article__plan-link_third-2">Link - Book 3 article 2</a> <a data-parent="#content-nav__book_third" data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_third-3" href="#content-article__info_third-3" class="content-article__plan-link content-article__plan-link_third-3">Link - Book 3 article 3</a> </div> <!--.content-article__plan--> </div> <!--.content-article--> <div id="content-nav__book_second" class="content-article collapse"> <div id="content-article__info_second-1" class="content-article__info collapse"> Book 2 article 1 </div> <!--.content-article__info--> <div id="content-article__info_second-2" class="content-article__info collapse"> Book 2 article 2 </div> <!--.content-article__info--> <div id="content-article__info_second-3" class="content-article__info collapse"> Book 2 article 3 </div> <!--.content-article__info--> <div class="content-article__plan"> <a data-parent="#content-nav__book_second" data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_second-1" href="#content-article__info_second-1" class="content-article__plan-link content-article__plan-link_second-1">Link - Book 2 article 1</a> <a data-parent="#content-nav__book_second" data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_second-2" href="#content-article__info_second-2" class="content-article__plan-link content-article__plan-link_second-2">Link - Book 2 article 2</a> <a data-parent="#content-nav__book_second" data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_second-3" href="#content-article__info_second-3" class="content-article__plan-link content-article__plan-link_second-3">Link - Book 2 article 3</a> </div> <!--.content-article__plan--> </div> <!--.content-article--> <div id="content-nav__book_first" class="content-article collapse show"> <div id="content-article__info_first-1" class="content-article__info collapse"> Book 1 article 1 </div> <!--.content-article__info--> <div id="content-article__info_first-2" class="content-article__info collapse"> Book 1 article 2 </div> <!--.content-article__info--> <div id="content-article__info_first-3" class="content-article__info collapse"> Book 1 article 3 </div> <!--.content-article__info--> <div class="content-article__plan"> <a data-parent="#content-nav__book_first" data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_first-1" href="#content-article__info_first-1" class="content-article__plan-link content-article__plan-link_first-1">Link - Book 1 article 1</a> <a data-parent="#content-nav__book_first" data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_first-2" href="#content-article__info_first-2" class="content-article__plan-link content-article__plan-link_first-2">Link - Book 1 article 2</a> <a data-parent="#content-nav__book_first" data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_first-3" href="#content-article__info_first-3" class="content-article__plan-link content-article__plan-link_first-3">Link - Book 1 article 3</a> </div> <!--.content-article__plan--> </div> <!--.content-article--> </div> <!--#content-articles-->
可能我不得不添加一些js。 但是代码不应该是多余的。
它不起作用,因为data-parent
属性应该是可折叠 ( .collapse
) 元素,而不是data-toggle
(trigger) 元素...
https://www.codeply.com/go/akODjGJZjE
<div class="container">
<div class="content-nav">
<a role="button" data-toggle="collapse" aria-expanded="false" aria-controls="content-nav__book_third" href="#content-nav__book_third" class="content-nav__book content-nav__book_third">3</a>
<a role="button" data-toggle="collapse" aria-expanded="false" aria-controls="content-nav__book_second" href="#content-nav__book_second" class="content-nav__book content-nav__book_second">2</a>
<a role="button" data-toggle="collapse" aria-expanded="true" aria-controls="content-nav__book_first" href="#content-nav__book_first" class="content-nav__book content-nav__book_first">1</a>
</div>
<!--.content-nav-->
<div id="content-articles">
<div id="content-nav__book_third" data-parent="#content-articles" class="content-article collapse">
<div id="content-article__info_third-1" data-parent="#content-nav__book_third" class="content-article__info collapse">
Book 3 article 1
</div>
<!--.content-article__info-->
<div id="content-article__info_third-2" data-parent="#content-nav__book_third" class="content-article__info collapse">
Book 3 article 2
</div>
<!--.content-article__info-->
<div id="content-article__info_third-3" data-parent="#content-nav__book_third" class="content-article__info collapse">
Book 3 article 3
</div>
<!--.content-article__info-->
<div class="content-article__plan">
<a data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_third-1" href="#content-article__info_third-1" class="content-article__plan-link content-article__plan-link_third-1">Link - Book 3 article 1</a>
<a data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_third-2" href="#content-article__info_third-2" class="content-article__plan-link content-article__plan-link_third-2">Link - Book 3 article 2</a>
<a data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_third-3" href="#content-article__info_third-3" class="content-article__plan-link content-article__plan-link_third-3">Link - Book 3 article 3</a>
</div>
<!--.content-article__plan-->
</div>
<!--.content-article-->
<div id="content-nav__book_second" data-parent="#content-articles" class="content-article collapse">
<div id="content-article__info_second-1" data-parent="#content-nav__book_second" class="content-article__info collapse">
Book 2 article 1
</div>
<!--.content-article__info-->
<div id="content-article__info_second-2" data-parent="#content-nav__book_second" class="content-article__info collapse">
Book 2 article 2
</div>
<!--.content-article__info-->
<div id="content-article__info_second-3" data-parent="#content-nav__book_second" class="content-article__info collapse">
Book 2 article 3
</div>
<!--.content-article__info-->
<div class="content-article__plan">
<a data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_second-1" href="#content-article__info_second-1" class="content-article__plan-link content-article__plan-link_second-1">Link - Book 2 article 1</a>
<a data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_second-2" href="#content-article__info_second-2" class="content-article__plan-link content-article__plan-link_second-2">Link - Book 2 article 2</a>
<a data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_second-3" href="#content-article__info_second-3" class="content-article__plan-link content-article__plan-link_second-3">Link - Book 2 article 3</a>
</div>
<!--.content-article__plan-->
</div>
<!--.content-article-->
<div id="content-nav__book_first" data-parent="#content-articles" class="content-article collapse show">
<div id="content-article__info_first-1" data-parent="#content-nav__book_first" class="content-article__info collapse">
Book 1 article 1
</div>
<!--.content-article__info-->
<div id="content-article__info_first-2" data-parent="#content-nav__book_first" class="content-article__info collapse">
Book 1 article 2
</div>
<!--.content-article__info-->
<div id="content-article__info_first-3" data-parent="#content-nav__book_first" class="content-article__info collapse">
Book 1 article 3
</div>
<!--.content-article__info-->
<div class="content-article__plan">
<a data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_first-1" href="#content-article__info_first-1" class="content-article__plan-link content-article__plan-link_first-1">Link - Book 1 article 1</a>
<a data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_first-2" href="#content-article__info_first-2" class="content-article__plan-link content-article__plan-link_first-2">Link - Book 1 article 2</a>
<a data-toggle="collapse" aria-expanded="false" aria-controls="content-article__info_first-3" href="#content-article__info_first-3" class="content-article__plan-link content-article__plan-link_first-3">Link - Book 1 article 3</a>
</div>
<!--.content-article__plan-->
</div>
<!--.content-article-->
</div>
<!--#content-articles-->
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.