akODjGJZjE

akODjGJZjE

关注
发信
用户取消打印预览对话框时如何关闭打印对话框
Ajax发布会截断前导零
Visual Studio HTML5验证:元素' img'不能嵌套在元素' a'中
无法定义从属typedef的成员
Pandas DataFrame合并，最终出现更多行
CLion如何将资源文件移动到构建目录
需要处理未捕获的异常并发送日志文件
通过untypeDataset生成数据库
列表视图过滤器忽略第二和第三个条件
volatile变量的值不会在多线程改变
为什么（以及如何）使用master..spt_values分割列？
a：悬停颜色不起作用
设计和工具建议
扩展 PHPUnit_Framework_TestCase 的不可测试基类
辅助应用程序的 FirebaseMessaging.getInstance(firebaseApp) 应该是公共的，但它是私有的?

Bootstrap 4 嵌套折叠“数据父级"不工作

扫码查看
本文介绍了Bootstrap 4 嵌套折叠“数据父级"不工作的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想使用折叠数据父选项.我需要传统的手风琴行为:当显示可折叠项目时，应关闭指定父项下的所有可折叠元素.但它不起作用.不知道是不是我的嵌套折叠造成的，还是我做错了什么.

<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"cross/脚本><script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7xfakfakvskin匿名"></script><script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjPVCUar5"7xSfFWpi1MquVdAyjPVCUar5<6/脚本><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" 类="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>

<!--.content-nav--><div id="内容文章"><div id="content-nav__book_third" class="content-article collapse"><div id="content-article__info_third-1" class="content-article__info 折叠">第3册第1条

<!--.content-article__info--><div id="content-article__info_third-2" class="content-article__info 折叠">第3册第2条

<!--.content-article__info--><div id="content-article__info_third-3" class="content-article__info 折叠">第3册第3条

<!--.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">链接 - 第 3 册第 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">链接 - 第 3 册第 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">链接 - 第 3 册第 3 条</a>

<!--.content-article__plan-->

<!--.content-article--><div id="content-nav__book_second" class="content-article collapse"><div id="content-article__info_second-1" class="content-article__info 折叠">第2册第1条

<!--.content-article__info--><div id="content-article__info_second-2" class="content-article__info 折叠">第2册第2条

<!--.content-article__info--><div id="content-article__info_second-3" class="content-article__info collapse">第2册第3条

<!--.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">链接 - 第 2 册第 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">链接 - 第 2 册第 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">链接 - 第 2 册第 3 条</a>

<!--.content-article__plan-->

<!--.content-article--><div id="content-nav__book_first" class="content-article 折叠展示"><div id="content-article__info_first-1" class="content-article__info 折叠">第1册第1条

<!--.content-article__info--><div id="content-article__info_first-2" class="content-article__info 折叠">第1册第2条

<!--.content-article__info--><div id="content-article__info_first-3" class="content-article__info 折叠">第1册第3条

<!--.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">链接 - 第 1 本书第 1 篇<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">链接 - 第 1 册第 2 篇<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">链接 - 第 1 册第 3 篇

<!--.content-article__plan-->

<!--.content-article-->

<!--#content-articles-->

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

解决方案

它不起作用，因为 data-parent 属性应该是可折叠 (.collapse) 元素，而不是 data-toggle(触发器)元素...

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

<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 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 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
<!--.content-nav--><div id="内容文章"><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">第3册第1条
<!--.content-article__info--><div id="content-article__info_third-2" data-parent="#content-nav__book_third" class="content-article__info collapse">第3册第2条
<!--.content-article__info--><div id="content-article__info_third-3" data-parent="#content-nav__book_third" class="content-article__info collapse">第3册第3条
<!--.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"> 链接 - 第 3 册第 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"> 链接 - 第 3 册第 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"> 链接 - 第 3 册第 3 条</a>
<!--.content-article__plan-->
<!--.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">第2册第1条
<!--.content-article__info--><div id="content-article__info_second-2" data-parent="#content-nav__book_second" class="content-article__info collapse">第2册第2条
<!--.content-article__info--><div id="content-article__info_second-3" data-parent="#content-nav__book_second" class="content-article__info collapse">第2册第3条
<!--.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"> 链接 - 第 2 册第 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"> 链接 - 第 2 册第 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 - 第 2 册第 3 条</a>
<!--.content-article__plan-->
<!--.content-article--><div id="content-nav__book_first" data-parent="#content-articles" class="content-article 折叠展示"><div id="content-article__info_first-1" data-parent="#content-nav__book_first" class="content-article__info collapse">第1册第1条
<!--.content-article__info--><div id="content-article__info_first-2" data-parent="#content-nav__book_first" class="content-article__info collapse">第1册第2条
<!--.content-article__info--><div id="content-article__info_first-3" data-parent="#content-nav__book_first" class="content-article__info collapse">第1册第3条
<!--.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 - 第 1 册第 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 - 第 1 册第 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 - 第 1 册第 3 条</a>
<!--.content-article__plan-->
<!--.content-article-->
<!--#content-articles-->

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 嵌套折叠“数据父级"不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-04 03:42
查看更多
Powered by LMLPHP ©2025 akODjGJZjE 0.041865