css - 无法正确显示 Accordion 折叠-6ren

css - 无法正确显示 Accordion 折叠

转载作者：行者123 更新时间：2023-11-27 23:22:16

Accordion 显示的结果没有响应

我正在学习折叠 Accordion 。我为正在创建的 Accordion 页面添加了 CSS。我已成功实现 Accordion Collapse，但结果没有响应。

我的代码是这样的

.MaskGrid {
  margin-top: 24px;
  margin-left: 24px;
  width: 327px;
  height: 80px;
  border-radius: 5px;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 1px 18px 0 rgba(0, 0, 0, 0.05), 0 6px 10px 0 rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}
.Prefilled {
  margin-top: 16px;
  margin-left: 16px;
  margin-right: 16px;
  margin-bottom: 16px;
  width: 295px;
  height: 48px;
  background-color: transparent;
}
.box {  
  padding: 1.25rem;
  -webkit-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  width: 327px;
  height: 317px;
  border-radius: 5px;
  box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 1px 18px 0 rgba(0, 0, 0, 0.05), 0 6px 10px 0 rgba(0, 0, 0, 0.05);
  background-color: #ffffff;
}
.address---street-name {
  width: 295px;
  height: 280px;
  font-family: sans-serif;
  font-size: 13px;
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.54;
  letter-spacing: normal;
  color: #1f2d3d;
}

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
      <!-- Bootstrap CSS -->
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
      <style type="text/css">
    	[aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {
    		display: none;
    	}
      </style>
</head>
    
    <body>
<div class="container">
    	<div class="row" id="accordion">
    		<!-- one -->
    	    <div class="MaskGrid">
    	        <div class="Prefilled card-link" data-toggle="collapse" href="#menuone" aria-expanded="false" aria-controls="menuone">
    			        <div class="NameText">Menu One</div>
                        <span class="collapsed"><i><img src="https://i.ibb.co/QXC72Qr/sa-arrow-down.png" class="sa-arrow-down"></i></span> 
                        <span class="expanded"><i><img src="https://i.ibb.co/xzFDHvj/sa-arrow-up.png" class="sa-arrow-up"></i></span>    
    	        </div>
    	        <div id="menuone" class="collapse">
    	        	<div class="card-body box">
    					<div class="address---street-name">
    					    		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    					</div>
    				</div>
    			</div>
    	    </div>
    		<!-- two -->
    	    <div class="MaskGrid">
    	        <div class="Prefilled card-link" data-toggle="collapse" href="#menutwo" aria-expanded="false" aria-controls="menutwo">
    			        <div class="NameText">Menu Two</div>
                        <span class="collapsed"><i><img src="https://i.ibb.co/QXC72Qr/sa-arrow-down.png" class="sa-arrow-down"></i></span> 
                        <span class="expanded"><i><img src="https://i.ibb.co/xzFDHvj/sa-arrow-up.png" class="sa-arrow-up"></i></span>         
    	        </div>
    	        <div id="menutwo" class="collapse">
    	        	<div class="card-body box">
    					<div class="address---street-name">
    					    		<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    					</div>
    				</div>
    			</div>
    	    </div>
    	</div>
    </div>
    <!-- jQuery library -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <!-- Latest compiled JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </body>
    
</html>

我想在选择 MenuOne 或 Menutwo 时制作 Accordion 菜单响应显示

谢谢

最佳答案

我对您的代码进行了一些修改，使其能够正确响应。

因为一些你需要知道的 Bootstrap 规则，比如 .row Bootstrap 类有一个 display: flex; 并且任何 flex div 都有子 div 所以子 div 也是采用display: flex;

因此，如果您没有在 flex 子元素中添加额外的 div，那么您的名为 .MaskGrid 的 div 将采用 display: flex;

如果 Accordion 数据不可见，那么在任何情况下，flex 兄弟 div 始终采用相同的高度。

就像下面的截图:

此外，我已经为响应式设计添加了视口(viewport)，如果您还没有添加，请添加。

修改后的代码如下:

HTML代码:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <!-- added viewport for responsive design -->
        <!-- Bootstrap CSS -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
        <style type="text/css">
            [aria-expanded="false"] > .expanded, [aria-expanded="true"] > .collapsed {
                display: none;
            }
        </style>
    </head>

    <body>
        <div class="container">
            <div class="row" id="accordion">
                <div class="col-auto"> <!-- added extra parent div -->
                    <!-- one -->
                    <div class="MaskGrid">
                        <div class="Prefilled card-link" data-toggle="collapse" href="#menuone" aria-expanded="false" aria-controls="menuone">
                            <div class="NameText">Menu One</div>
                            <span class="collapsed"><i><img src="https://i.ibb.co/QXC72Qr/sa-arrow-down.png" class="sa-arrow-down"></i></span>
                            <span class="expanded"><i><img src="https://i.ibb.co/xzFDHvj/sa-arrow-up.png" class="sa-arrow-up"></i></span>
                        </div>
                        <div id="menuone" class="collapse">
                            <div class="card-body box">
                                <div class="address---street-name">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- two -->
                </div>
                <div class="col-auto">  <!-- added extra parent div -->
                    <div class="MaskGrid">
                        <div class="Prefilled card-link" data-toggle="collapse" href="#menutwo" aria-expanded="false" aria-controls="menutwo">
                            <div class="NameText">Menu Two</div>
                            <span class="collapsed"><i><img src="https://i.ibb.co/QXC72Qr/sa-arrow-down.png" class="sa-arrow-down"></i></span>
                            <span class="expanded"><i><img src="https://i.ibb.co/xzFDHvj/sa-arrow-up.png" class="sa-arrow-up"></i></span>
                        </div>
                        <div id="menutwo" class="collapse">
                            <div class="card-body box">
                                <div class="address---street-name">
                                    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </body>

</html>

CSS 代码:

.MaskGrid {
margin-top: 24px;
margin-left: 24px;
width: 327px;
height: auto; /*change 80px to auto*/
border-radius: 5px;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 1px 18px 0 rgba(0, 0, 0, 0.05), 0 6px 10px 0 rgba(0, 0, 0, 0.05);
background-color: #ffffff;
}
.Prefilled {
margin-top: 16px;
margin-left: 16px;
margin-right: 16px;
margin-bottom: 16px;
width: 295px;
height: 48px;
background-color: transparent;
}
.collapse.show .box { /*added .collapse.show*/
padding: 1.25rem;
-webkit-box-flex: 1;
-ms-flex: 1 1 auto;
flex: 1 1 auto;
width: 327px;
height: 317px;
border-radius: 5px;
box-shadow: 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 1px 18px 0 rgba(0, 0, 0, 0.05), 0 6px 10px 0 rgba(0, 0, 0, 0.05);
background-color: #ffffff;
}
.collapse.show .address---street-name { /*added .collapse.show*/
width: 295px;
height: 280px;
font-family: sans-serif;
font-size: 13px;
font-weight: normal;
font-style: normal;
font-stretch: normal;
line-height: 1.54;
letter-spacing: normal;
color: #1f2d3d;
}

请尝试此代码，如果您有任何问题，请告诉我。

关于css - 无法正确显示 Accordion 折叠，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57941118/

文章推荐： C++ 对象池 : program crashes when using malloc

文章推荐： css - 绝对位置按钮(以它所在的中心模式)

文章推荐： C++ getpeername 返回 0.0.0.0 :0

文章推荐： javascript - 如何将 porttractor 报告导出到远程服务器

dart - ShadowDom外部的父级的属性已更改(显示:无->显示:flex->显示:无)
我的Angular-Component位于一个flexbox(id =“log”)中。可以显示或隐藏flexbox。我的组件内部有一个可滚动区域，用于显示日志消息。 (id =“message-li
phpinfo() 显示 MySQL，PMA 显示 MariaDB
我真的很困惑有一个 phpinfo() 输出: MySQL 支持启用客户端 API 版本 5.5.40 MYSQL_MODULE_TYPE 外部 phpMyAdmin 显示: 服务器类型:Mar
jquery - 在 jquery 切换中单击时更改按钮文本(显示/隐藏/显示)
我正在研究这个 fiddle : http://jsfiddle.net/cED6c/7/我想让按钮文本在单击时发生变化，我尝试使用以下代码: 但是，它不起作用。我应该如何实现这个？任何帮助都会很棒
php - cakephp 显示 ID 显示 table.name 来自两个不同表的关系
我应该在“dogs_cats”中保存表“dogs”和“cats”各自的ID，当看到数据时显示狗和猫的名字。我有这三个表: CREATE TABLE IF NOT EXISTS cats ( id
php - 使用 Blade 显示 HTML 显示 HTML 代码
我有一个字符串返回到我的 View 之一，如下所示: $text = 'Lorem ipsum dolor ' 我正在尝试用 Blade 显示它: {{$text}} 但是，输出是原始字符串而不是渲染
jquery - 使用 JQuery 显示/隐藏隐藏/显示 div，但单击按钮没有效果
我无法让我的链接(由图像表示，位于页面左侧)真正有效地显示一个 div(包含一个句子，位于中间)/单击链接时隐藏。这是我的代码: Practice
javascript - 显示 image1 的脚本，然后(随机毫秒)显示 image2 并停止
关闭。这个问题需要多问focused 。目前不接受答案。想要改进此问题吗？更新问题，使其仅关注一个问题 editing this post . 已关闭 4 年前。 Improve this ques
c# - ListView 显示 4 条记录。 DataGridView 显示 3 条记录？
最初我使用 Listview 来显示 oracle 结果，但是最近我不得不切换到 datagridview 来处理比 Listview 允许的更多的结果。然而，自从切换到数据网格后，我得到的结果越来越
xml - 如何使用 Apache fop 显示 Unicode 字符？显示 "?"而不是字符。
我一直在尝试插入一个 Unicode 字符 ∇ 或 ▽，所以它显示在 Apache FOP 生成的 PDF 中。这是我到目前为止所做的: 根据这个基本帮助 Apache XSL-FO Input，您
node.js - pm2 显示 1.2GB 而 heapdump 显示 80MB
我正在使用 node v0.12.7 编写一个 nodeJS 应用程序。我正在使用 pm2 v0.14.7 运行我的 nodejs 应用程序。我的应用程序似乎有内存泄漏，因为它从我启动时的大约 1
jquery - 如果 x 显示 x 如果 y 显示 y(我知道这个标题不好)
好的，所以我有一些 jQuery 代码，如果从下拉菜单中选择了带有前缀 Blue 的项目，它会显示一个输入框。代码: $(function() { $('#text1').hide();
google-chrome - Chrome 中的“检查元素”显示 LESS，但 Firefox 显示 CSS
当我试图检查 Chrome 中的 html 元素时，它显示的是 LESS 文件，而 Firefox 显示的是 CSS 文件。 (我正在使用 Bootstrap 框架) 如何在 Chrome 中查看 c
python - Microsoft Bot Emulator 显示 "sending failed. Retry"。 VSCode 显示 KeyError : 'HTTP_CONTEXT_TYPE'
我是 Microsoft Bot Framework 的新手，我正在通过 youtube 视频 https://youtu.be/ynG6Muox81o 学习它并在 Ubuntu 上使用 python
encoding - notepad++ 显示 ucs-2LE 而 ubuntu FILE [file] 显示 UTF-16LE，我很困惑？
我正在尝试转换从 mssql 生成的文件到 utf-8。当我打开他的输出 mssql在 Windows Server 2003 中使用 notepad++ 将文件识别为 UCS-2LE我使用 file
javascript帮助日期/显示
很难说出这里问的是什么。这个问题是含糊的、模糊的、不完整的、过于宽泛的或修辞性的，无法以目前的形式得到合理的回答。如需帮助澄清此问题以便重新打开它，visit the help center 。已关
jQuery点击关闭div(显示)
我正在尝试执行单击以打开/关闭一个 div 的功能。这是基本的，但是，点击只显示 div，当我点击“关闭”时，没有任何反应。 $(".inscricao-email").click(function
flutter - 显示/隐藏小部件而不重新创建它
假设我有 2 张卡片，屏幕上一次显示一张。我有一个按钮可以用其他卡片替换当前卡片。现在假设卡 1 上有一些数据，卡 2 上有一些数据，我不想破坏它们每个上的数据，或者我不想再次重建它们中的任何一个。
javascript - 显示()未定义
我正在使用 Eloquent Javascript 学习 Javascript。我在 Firefox 控制台上编写了以下代码，但它返回:“ReferenceError:show() 未定义”为什么？
symfony - 显示/隐藏某些菜单取决于奏鸣曲管理员角色
我正在使用 Symfony2 开发一个 web 项目，我使用 Sonata Admin 作为管理面板，一切正常，但我想要做的是，在 Sonata Admin 的仪表板菜单上，我需要显示隐藏一些菜单取决
angularjs - 显示/隐藏div取决于AngularJS中的下拉列表选择
我试图显示一个div，具体取决于从下拉列表中选择的内容。例如，如果用户从列表中选择“现金”显示现金div或用户从列表中选择“检查”显示现金div 我整理了样本，但样本不完整，需要接线 http://j

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

css - 无法正确显示 Accordion 折叠