Bootstrap 4 嵌套折叠“data-parent”不起作用

2023-11-24

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

<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（触发）元素...

https://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>

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

html

twitterbootstrap

Bootstrap4

Bootstrap 4 嵌套折叠“data-parent”不起作用的相关文章

在 Wordpress 站点中进行 AJAX 调用时出现问题

我在使用 Wordpress 站点功能的 AJAX 部分时遇到了一些问题该功能接受在表单上输入的邮政编码使用 PHP 函数来查找邮政编码是否引用特定位置并返回到该位置的永久链接我的第一个问题是关于我构建的表单现在我的表单操作是空白的
Google App Engine：修改云运行环境

我正在尝试部署一个使用自定义 Node js 服务器的 Next js 应用程序我想将自定义构建变量注入应用程序 next config js const NODE ENV process env NODE ENV const envTy
如何抑制窗口鼠标滚轮滚动...？

我正在开发嵌入页面中的画布应用程序我有它因此您可以使用鼠标滚轮放大绘图但不幸的是这会滚动页面因为它是文章的一部分当我在 dom 元素上滚动鼠标滚轮时是否可以阻止鼠标滚轮在窗口上滚动附加鼠标滚轮不是 Gecko DOMMou
Javascript正则表达式用于字母字符和空格？ [关闭]

这个问题不太可能对任何未来的访客有帮助它只与一个较小的地理区域一个特定的时间点或一个非常狭窄的情况相关通常不适用于全世界的互联网受众为了帮助使这个问题更广泛地适用访问帮助中心 help reopen questions 我需要一个
Node.js：如何在检索数据（块）时关闭响应/请求

我正在用 node js 构建一个应用程序它加载多个页面并分析内容因为 node js 发送块所以我可以分析这些块如果一个块包含例如索引 nofollow 我想关闭该连接并继续其余部分 var host example com to
从未用 @flow 标记的导入文件中获取类型定义

TL DR我怎么告诉flow从未声明的导入模块导入类型定义 flow 加长版流接缝能够从不使用流语法的文件中派生类型请参阅示例示例文件 flow js if Math random lt 0 5 var y hello else va
从标签获取 href 值

我有以下 html div class threeimages a img alt Australia src Images Services 20button tcm7 9688 gif a div class text h2 a hre
MVC 在布局代码之前执行视图代码并破坏我的脚本顺序

我正在尝试将所有 javascript 包含内容移至页面底部我正在将 MVC 与 Razor 一起使用我编写了一个辅助方法来注册脚本它按注册顺序保留脚本并排除重复的内容 Html RegisterScript scripts som
jquery从变量中删除html元素

我将 html 保存在变量中 var itinerary events today html 我有很多 html 和一个按钮我想删除它的 ID 为 myButton 如何从变量中保存的 html 中删除它我建议这种方法 var itin
跟踪用户何时点击浏览器上的后退按钮

是否可以检测用户何时单击浏览器的后退按钮我有一个 Ajax 应用程序如果我可以检测到用户何时单击后退按钮我可以显示适当的数据任何使用 PHP JavaScript 的解决方案都是优选的任何语言的解决方案都可以只需要我可以翻译成
Iframe 相对路径挑战

我有一个页面在页面内有一个 Iframe 目录如下 Folder1 Folder2 IframeCSS IframeCSS Css iframePage1 html stuff css parentPage1 html 在 iframeP
如何在使用页面锚点导航时设置“激活”类以在 Angular 2 中引导导航栏？

我正在使用 Angular 2 和 Bootstrap 4 创建一个单页网站我创建了一个始终位于页面顶部的导航栏组件并且我正在使用页面锚点导航 id 请注意我还没有创建路由模块到目前为止还没有必要这样做导航栏代码如下
动态img（或视频）标签根本不加载资源，HTTP请求处于“待处理”状态

我尝试使用以下方法在 Web 应用程序上加载资源时遇到一些问题img or videoHTML 标签我在我的应用程序中使用 Angular 并动态设置src的参数img标签使用ng src src 指示没有那么多图像和资源需要加载在
提交表单并重定向页面

我在 SO 上看到了很多与此相关的其他问题但没有一个对我有用我正在尝试提交POST表单然后将用户重定向到另一个页面但我无法同时实现这两种情况我可以获取重定向或帖子但不能同时获取两者这是我现在所拥有的
我可以使用 jQuery 打开下拉列表吗

对于 HTML 中的下拉列表
Javascript转换时区问题

我在转换当前时区的日期时间时遇到问题我从服务器收到此日期字符串格式为 2015 10 09T08 00 00 这是中部时间但是当我使用 GMT 5 中的 new Date strDate 转换此日期时间时它返回给我的信息如下这是不
更改文本输入标签中文本的大小？

我有一个很大的文本输入框但我无法更改字体大小
如何在jquery中以相反的顺序迭代元素？ [复制]

这个问题在这里已经有答案了我是jquery的新手我想知道如何使用each 在jquery中以相反的顺序迭代表单元素任何帮助将不胜感激尝试这个 input get reverse each function
如何在 pg-promise 中设置模式

我正在搜索的文档pg 承诺 https github com vitaly t pg promise特别是在创建客户端时但我无法找到设置连接中使用的默认架构的选项它始终使用public架构我该如何设置通常为数据库或角色设置默认架构
无效字符错误：“fred”

我确信他一定是一个新手问题简单来说我想定义我的第一个 Polymer dart 组件只是我一直在同一个减速带上踢脚趾为了使事情变得非常简单我将其简化为一个非常简单的示例我做了一个简单的rename示例跑表来自 Dart 组件

随机推荐

计算垂直于 3D 中第三个向量的两个向量

是什么最好最快如何计算垂直于第三个向量 X 并且彼此垂直的两个向量这就是我现在计算这个向量的方式 HELPER unit vector that is NOT parallel to X x axis normalize X y ax
Python 多处理导致许多僵尸进程

我一直在使用一组工作人员来实现 python 的多处理库我实现了以下代码 import main1 t1 time time p Pool cores result p map main1 client list client if re
Python 列表作为变量名称[重复]

这个问题在这里已经有答案了我一直在使用 Python 并且我有这个需要制定的列表基本上我在多维数组中输入一个游戏列表然后对于每个游戏它将根据第一个条目创建 3 个变量制作的数组 Applist Apple red circle
AutoHotkey 中的功能键叫什么？

I have a key labelled Fn in blue letters at the bottom of my Windows 7 keyboard I want to trigger my AutoHotkey script w
在 Java 中对阿拉伯语单词进行排序

我有一个阿拉伯语单词列表我想对其进行排序我已经尝试了具有不同语言环境的标准 Collat or 例如英语或法语但没有太大希望我什至创建了自己的 RuleBasedCollat or 但无济于事显然默认排序依赖于 unicode
python 集合的哈希如何工作[重复]

这个问题在这里已经有答案了我完全熟悉哈希表和哈希的工作原理但我试图完全理解O 1 完全来自 set1 s t print x in set1 print s in set1 set2 s print s in set2 我被告知要检查是
具有初始数据的 docker postgres 不会在提交时保留

我在 Docker 环境中创建了一个 Rails 应用程序它链接到一个 postgres 实例我编辑了 postgres 容器添加初始数据通过从 Rails 应用程序运行 rake db setup 现在我提交了 postgres 数
SELECT 然后立即删除 mysql 记录

我有一个 PHP 脚本它运行 SELECT 查询然后立即删除记录有多个机器正在 ping 同一个 php 文件并从同一个表中获取数据每台远程机器都运行一个 cron 作业我的问题是有时它无法足够快地删除因为某些机器在同一时间执
如何从 FileReader() 获取路径目录？

您好我有这些代码来读取用户上传的文件 function readURL input if input files input files 0 var reader new FileReader reader onload function
如何通过单击 HTML 中的图像来展开图像

我的 html 页面中有一个图像 img src http s3 media1 ak yelpcdn com bphoto sMONYSiLUQEvooJ5hZh0Sw l jpg alt width 200 height 150 如何通过
如何在不阻塞主线程的情况下使用 Qt-Dbus 绑定

我的目标是使用创建一个库Qt 的 DBus 绑定我尝试创建一个 Qt 应用程序而不启动QEventLoop 由提供QCoreApplication类在主线程中这是一个简约的应用程序示例使用 QT 4 6 2 版本工作正常但使用 Q
从 Pandas 中的字符串中提取 int

假设我有一个数据框df as A B 1 V2 3 W42 1 S03 2 T02 3 U71 我想要一个新专栏要么在它的末尾df或更换色谱柱B与它因为它并不重要只从列中提取 intB 这就是我想要的专栏C看起来像 C 2 42 3
强制转换为 typeof(self)

是否有可能创建一个类别扩展最终返回一个转换为的对象instancetype 我有一个类别来加载 SKS 文件但由于该类别适用于SKNode然后所有其他子类都喜欢SKScene or SKEmitterNode等也会采用它所以我只是
除法返回零

这个简单的计算返回零我无法弄清楚 decimal share 18 58 100 您在这里使用整数尝试对计算中的所有数字使用小数 decimal share 18m 58m 100m
创建您自己的自定义适配器时，getView() 方法如何工作？

我的问题是 LayoutInflater到底有什么作用呢为什么我读过的所有文章都首先检查convertview 是否为空当它为 null 时意味着什么当它不为 null 时又意味着什么该方法接受的父参数是什么 1 The Layou
Outlook 筛选项目 - 获取一周范围内的所有定期约会

我试图在 Outlook 中获取一周范围内的所有约会但重复发生的约会没有显示这是代码 var outlook new Microsoft Office Interop Outlook Application var calendar o
有没有带有观察点的免费 python 调试器？ [关闭]

Closed 此问题正在寻求书籍工具软件库等的推荐不满足堆栈溢出指南目前不接受答案 pdb 和 winpdb 似乎都缺少这个基本的对我来说功能我看到一些建议 WingIDE 有它但我更喜欢免费的解决方案如果我必须付费我更
Alamofire 4.0 证书无效问题

我正在尝试通过 https 为我的 iOS 应用程序使用 Web 服务 Web 服务器使用自签名证书使用 Web 服务时我收到错误证书无效失败错误域 NSURLErrorDomain代码 1202 该服务器的证书无效您可能正在连
Gimp 的“Color to Alpha”功能背后的算法是什么？

对于那些还不熟悉 Gimp 的 Color to Alpha 功能的人以下是 Gimp 文档中的页面颜色到 Alpha 它做得非常好我很想知道 Gimp 在颜色处理方面到底是如何做到的无论颜色可能处于哪个颜色空间非常感谢您的任何提
Bootstrap 4 嵌套折叠“data-parent”不起作用

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

Bootstrap 4 嵌套折叠“data-parent”不起作用

Bootstrap 4 嵌套折叠“data-parent”不起作用 的相关文章

随机推荐

热门标签

Bootstrap 4 嵌套折叠“data-parent”不起作用的相关文章