Bootstrap 4嵌套折叠" data-parent"不工作 [英] Bootstrap 4 nested collapse "data-parent" not working

问题描述

我想使用折叠数据 - 父选项。我需要传统的手风琴行为：当显示可折叠项目时，应关闭指定父级下的所有可折叠元素。但它不起作用。我不知道这是因为我的嵌套崩溃还是我做错了。

 < link rel =stylesheethref =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.cssintegrity =sha384-Gn5384xqQ1aoWXA + 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW / dAiS6JXmcrossorigin =anonymous>< script src =https://code.jquery.com/jquery-3.2.1.slim.min.jsintegrity =sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr / rE9 / Qpg6aAZGJwFDMVNA / GpGFF93hXpG5KkNcrossorigin =匿名>< / script>< script src =https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.jsintegrity =sha384- ApNbgh9B + Y1QKtv3Rn7W3mgPxhU9K / ScQsAP7hUibX39j7fakFPskvXusvfa0b4Qcrossorigin =anonymous>< / script>< script src =https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.jsinteg rity =sha384-JZR6Spejh4U02d8jOt6vLEHfe / JQGiRRSQQxSfFWpi1MquVdAyjUar5 + 76PVCmYlcrossorigin =anonymous>< / script>< div class =content-nav> < a data-parent =＃content-articlesrole =buttondata-toggle =collapsearia-expanded =falsearia-controls =content-nav__book_thirdhref =＃content-nav__book_thirdclass =content-nav__book content-nav__book_third> 3< / a> < a data-parent =＃content-articlesrole =buttondata-toggle =collapsearia-expanded =falsearia-controls =content-nav__book_secondhref =＃content-nav__book_secondclass =content-nav__book content-nav__book_second> 2< / a> < a data-parent =＃content-articlesrole =buttondata-toggle =collapsearia-expanded =truearia-controls =content-nav__book_firsthref =＃content-nav__book_firstclass =content-nav__book content-nav__book_first> 1< / a>< / div><！ - 。content-nav  - >< div id =content-articles> < div id =content-nav__book_thirdclass =content-article collapse> < div id =content-article__info_third-1class =content-article__info collapse>第3册第1条< / div> <！ - 内容 -  article__info  - >。 < div id =content-article__info_third-2class =content-article__info collapse>第3册第2条< / div> <！ - 内容 -  article__info  - >。 < div id =content-article__info_third-3class =content-article__info collapse>第3册第3条< / div> <！ - 内容 -  article__info  - >。 < div class =content-article__plan> < a data-parent =＃content-nav__book_thirddata-toggle =collapsearia-expanded =falsearia-controls =content-article__info_third-1href =＃content-article__info_third-1class = content-article__plan-link content-article__plan-link_third-1>链接 - 第3册第1条< / a> < a data-parent =＃content-nav__book_thirddata-toggle =collapsearia-expanded =falsearia-controls =content-article__info_third-2href =＃content-article__info_third-2class = content-article__plan-link content-article__plan-link_third-2>链接 - 第3册第2条< / a> < a data-parent =＃content-nav__book_thirddata-toggle =collapsearia-expanded =falsearia-controls =content-article__info_third-3href =＃content-article__info_third-3class = content-article__plan-link content-article__plan-link_third-3> Link  -  Book 3 article 3< / a> < / DIV> <！ - 内容 -  article__plan  - >。 < / DIV> <！ - 内容 - 文章 - > < div id =content-nav__book_secondclass =content-article collapse> < div id =content-article__info_second-1class =content-article__info collapse>第2册第1条< / div> <！ - 内容 -  article__info  - >。 < div id =content-article__info_second-2class =content-article__info collapse>第2册第2条< / div> <！ - 内容 -  article__info  - >。 < div id =content-article__info_second-3class =content-article__info collapse>第2册第3条< / div> <！ - 内容 -  article__info  - >。 < div class =content-article__plan> < a data-parent =＃content-nav__book_seconddata-toggle =collapsearia-expanded =falsearia-controls =content-article__info_second-1href =＃content-article__info_second-1class = content-article__plan-link content-article__plan-link_second-1>链接 - 第2册第1条< / a> < a data-parent =＃content-nav__book_seconddata-toggle =collapsearia-expanded =falsearia-controls =content-article__info_second-2href =＃content-article__info_second-2class = content-article__plan-link content-article__plan-link_second-2>链接 - 第2册第2条< / a> < a data-parent =＃content-nav__book_seconddata-toggle =collapsearia-expanded =falsearia-controls =content-article__info_second-3href =＃content-article__info_second-3class = content-article__plan-link content-article__plan-link_second-3>链接 - 第2册第3条< / a> < / DIV> <！ - 内容 -  article__plan  - >。 < / DIV> <！ - 内容 - 文章 - > < div id =content-nav__book_firstclass =content-article collapse show> < div id =content-article__info_first-1class =content-article__info collapse>第1册第1条< / div> <！ - 内容 -  article__info  - >。 < div id =content-article__info_first-2class =content-article__info collapse>第1册第2条< / div> <！ - 内容 -  article__info  - >。 < div id =content-article__info_first-3class =content-article__info collapse>第1册第3条< / div> <！ - 内容 -  article__info  - >。 < div class =content-article__plan> < a data-parent =＃content-nav__book_firstdata-toggle =collapsearia-expanded =falsearia-controls =content-article__info_first-1href =＃content-article__info_first-1class = content-article__plan-link content-article__plan-link_first-1>链接 - 第1册第1条< / a> < a data-parent =＃content-nav__book_firstdata-toggle =collapsearia-expanded =falsearia-controls =content-article__info_first-2href =＃content-article__info_first-2class = content-article__plan-link content-article__plan-link_first-2>链接 - 第1册第2条< / a> < a data-parent =＃content-nav__book_firstdata-toggle =collapsearia-expanded =falsearia-controls =content-article__info_first-3href =＃content-article__info_first-3class = content-article__plan-link content-article__plan-link_first-3>链接 - 第1册第3条< / a> < / DIV> <！ - 内容 -  article__plan  - >。 < / DIV> <！ - 内容物品 - >。< / DIV><！ - ＃内容的文章 - >  

可能我不得不添加一些js。但代码不应该是多余的。

解决方案

它不起作用，因为 data-parent 属性应该是可折叠的（ .collapse ）元素，而不是数据切换（触发器）元素...

https：// www .codeply.com / go / akODjGJZjE

 < div class =container> 
< div class =content-nav> 
< a role =buttondata-toggle =collapsearia-expanded =falsearia-controls =content-nav__book_thirdhref =＃content-nav__book_thirdclass =content-nav__book content -nav__book_third→3< / A> 
< a role =buttondata-toggle =collapsearia-expanded =falsearia-controls =content-nav__book_secondhref =＃content-nav__book_secondclass =content-nav__book content -nav__book_second> 2'; / A> 
< a role =buttondata-toggle =collapsearia-expanded =truearia-controls =content-nav__book_firsthref =＃content-nav__book_firstclass =content-nav__book content -nav__book_first→1< / A> 
< / div> 
<！ - 。content-nav  - > 
< div id =content-articles> 
< div id =content-nav__book_thirddata-parent =＃content-articlesclass =content-article collapse> 
< div id =content-article__info_third-1data-parent =＃content-nav__book_thirdclass =content-article__info collapse> 
第3册第1条
< / div> 
<！ - 。content-article__info  - > 
< div id =content-article__info_third-2data-parent =＃content-nav__book_thirdclass =content-article__info collapse> 
第3册第2条
< / div> 
<！ - 。content-article__info  - > 
< div id =content-article__info_third-3data-parent =＃content-nav__book_thirdclass =content-article__info collapse> 
第3册第3条
< / div> 
<！ - 。content-article__info  - > 
 
< div class =content-article__plan> 
< a data-toggle =collapsearia-expanded =falsearia-controls =content-article__info_third-1href =＃content-article__info_third-1class =content-article__plan-link content-article__plan-link_third-1>链接 - 第3册第1条< / a> 
< a data-toggle =collapsearia-expanded =falsearia-controls =content-article__info_third-2href =＃content-article__info_third-2class =content-article__plan-link content-article__plan-link_third-2>链接 - 第3册第2条< / a> 
< a data-toggle =collapsearia-expanded =falsearia-controls =content-article__info_third-3href =＃content-article__info_third-3class =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_seconddata-parent =＃content-articlesclass =content-article collapse> 
< div id =content-article__info_second-1data-parent =＃content-nav__book_secondclass =content-article__info collapse> 
第2册第1条
< / div> 
<！ - 。content-article__info  - > 
< div id =content-article__info_second-2data-parent =＃content-nav__book_secondclass =content-article__info collapse> 
第2册第2条
< / div> 
<！ - 。content-article__info  - > 
< div id =content-article__info_second-3data-parent =＃content-nav__book_secondclass =content-article__info collapse> 
第2册第3条
< / div> 
<！ - 。content-article__info  - > 
 
< div class =content-article__plan> 
< a data-toggle =collapsearia-expanded =falsearia-controls =content-article__info_second-1href =＃content-article__info_second-1class =content-article__plan-link content-article__plan-link_second-1>链接 - 第2册第1条< / a> 
< a data-toggle =collapsearia-expanded =falsearia-controls =content-article__info_second-2href =＃content-article__info_second-2class =content-article__plan-link content-article__plan-link_second-2>链接 - 第2册第2条< / a> 
< a data-toggle =collapsearia-expanded =falsearia-controls =content-article__info_second-3href =＃content-article__info_second-3class =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_firstdata-parent =＃content-articlesclass =content-article collapse show> 
< div id =content-article__info_first-1data-parent =＃content-nav__book_firstclass =content-article__info collapse> 
第1册第1条
< / div> 
<！ - 。content-article__info  - > 
< div id =content-article__info_first-2data-parent =＃content-nav__book_firstclass =content-article__info collapse> 
第1册第2条
< / div> 
<！ - 。content-article__info  - > 
< div id =content-article__info_first-3data-parent =＃content-nav__book_firstclass =content-article__info collapse> 
第1册第3条
< / div> 
<！ - 。content-article__info  - > 
 
< div class =content-article__plan> 
< a data-toggle =collapsearia-expanded =falsearia-controls =content-article__info_first-1href =＃content-article__info_first-1class =content-article__plan-link content-article__plan-link_first-1>链接 - 第1册第1条< / a> 
< a data-toggle =collapsearia-expanded =falsearia-controls =content-article__info_first-2href =＃content-article__info_first-2class =content-article__plan-link content-article__plan-link_first-2>链接 - 第1册第2条< / a> 
< a data-toggle =collapsearia-expanded =falsearia-controls =content-article__info_first-3href =＃content-article__info_first-3class =content-article__plan-link content-article__plan-link_first-3>链接 - 第1册第3条< / a> 
< / div> 
<！ - 。content-article__plan  - > 
< / div> 
<！ - 。content-article  - > 
< / div> 
<！ -  #content-articles  - > 
< / div> 
  

I want to use collapse data-parent options. I need traditional accordion behavior: all collapsible elements under the specified parent should be closed when a collapsible item is shown. But it doesn't work. I don't know if that's because of my nested collapse or I do something wrong.

<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-->

Probably I had to add some js. But the code should not be redundant.

解决方案

It's not working because the data-parent attribute should be the collapsible (.collapse) element, instead of the data-toggle (trigger) element...

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>

这篇关于Bootstrap 4嵌套折叠" data-parent"不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！