无法正确显示手风琴折叠
手风琴的显示结果无响应
我正在学习使手风琴倒塌。 我为正在创建的手风琴页面添加了CSS。 我已经成功实现了“手风琴折叠”功能，但是结果没有响应。
我编写这样的代码
.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时，我想使手风琴菜单响应显示
谢谢
2 个答案:
答案 0 :(得分：0)
我对您的代码做了一些修改，以使其能够正确响应。
由于您需要了解一些引导程序规则，例如 .row 引导程序类具有 display：flex; 并且任何flex div都有子div，因此子div也进行显示：flex;
因此，如果您未在flex子级中添加额外的div，则您名为 .MaskGrid 的div将显示 display：flex;
如果看不到您的手风琴数据，那么在任何情况下，flex同级div之后始终会保持相同的高度。
就像下面的截图一样：
此外，如果您尚未添加视口，请添加。
修改后的代码如下：
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;
}
请尝试使用此代码，如果您有任何疑问，请告诉我。
答案 1 :(得分：0)
您可以基于bootstrap 4和jquery使用此手风琴，它的响应速度很好：）
HTML：
df = df2[np.logical_or.reduce(out)]
CSS：
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<section id="faq">
<div class="faq container">
<div class="row">
<div class="heading col-xs-12 col-sm-12 col-lg-12">
<h1>FAQ</h1>
<h2 class="accordion-header">Accordio Element 1</h2>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sed id semper risus in hendrerit. Tempor orci dapibus ultrices in iaculis nunc sed augue lacus.</p>
</div>
<h2 class="accordion-header">Accordio Element 2</h2>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac orci phasellus egestas tellus rutrum tellus pellentesque.</p>
</div>
<h2 class="accordion-header">Accordio Element 3</h2>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Consectetur a erat nam at lectus urna duis convallis convallis. Condimentum vitae sapien pellentesque habitant morbi. Ornare arcu dui vivamus arcu felis bibendum ut tristique et.</p>
</div>
<h2 class="accordion-header">Accordio Element 4</h2>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Felis donec et odio pellentesque diam volutpat commodo sed. At auctor urna nunc id cursus metus aliquam eleifend. A diam maecenas sed enim.</p>
<p>Arcu non sodales neque sodales ut etiam. At lectus urna duis convallis convallis tellus id interdum velit. Magna fermentum iaculis eu non diam phasellus vestibulum lorem sed. Amet nisl suscipit adipiscing bibendum est ultricies integer quis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Nullam non nisi est sit amet facilisis magna etiam tempor. Congue nisi vitae suscipit tellus mauris a diam maecenas sed. Hac habitasse platea dictumst quisque. Nec dui nunc mattis enim.</p>
</div>
<h2 class="accordion-header">Accordio Element 5</h2>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Et malesuada fames ac turpis egestas sed tempus urna. Nulla facilisi morbi tempus iaculis urna. Curabitur vitae nunc sed velit dignissim sodales ut eu sem.</p>
</div>
</div>
</div>
</div>
</section>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<!-- scripts js -->
<script>
$('.accordion-header').toggleClass('inactive-header');
//Set The Accordion Content Width
var contentwidth = $('.accordion-header').width();
$('.accordion-content').css({'width' : contentwidth });
//Open The First Accordion Section When Page Loads
$('.accordion-header').first().toggleClass('active-header').toggleClass('inactive-header');
$('.accordion-content').first().slideDown().toggleClass('open-content');
// The Accordion Effect
$('.accordion-header').click(function () {
if($(this).is('.inactive-header')) {
$('.active-header').toggleClass('active-header').toggleClass('inactive-header').next().slideToggle().toggleClass('open-content');
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
else {
$(this).toggleClass('active-header').toggleClass('inactive-header');
$(this).next().slideToggle().toggleClass('open-content');
}
});
</script>
</body>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？