堆栈内存溢出
  繁体   English   中英

尝试创建手风琴菜单，当我点击问题的标题时，答案不会出现或崩溃，为什么会这样？

[英]Trying to create an accordion menu and when I click on the title of the question, the answer doesn't appear or collapse, why is this?

 原文  2019-05-31 14:42:57  8   1    javascript/ html/ css

问题描述

我正在尝试创建一个手风琴菜单，允许我隐藏我的答案，只出现在问题的点击。 出于某种原因，当您点击该问题时，没有任何反应。

我的代码： 

 .accordion-Section { background: #fdfdfd; min-height: 100vh; padding: 10vh 0 0; } .accordion-Title { position: relative; margin-bottom: 45px; display: block; font-weight: 600; line-height: 1; } .accordion-Title h2::before { content: ""; position: absolute; left: 50%; width: 60px; height: 2px; background: #E91E63; bottom: -25px; margin-left: -30px; } .accordion-Title p { padding: 0 190px; margin-bottom: 10px; } .faq { background: #FFFFFF; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-radius: 4px; } .faq .accordion { border: none; background: none; border-bottom: 1px dashed #CEE1F8; } .faq .card .accordionCardHeader { padding: 0px; border: none; background: none; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .faq .card .accordionCardHeader:hover { background: rgba(233, 30, 99, 0.1); padding-left: 10px; } .faq .card .accordionCardHeader .accordion-Title { width: 100%; text-align: left; padding: 0px; padding-left: 30px; padding-right: 30px; font-weight: 400; font-size: 15px; letter-spacing: 1px; color: #3B566E; text-decoration: none !important; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; cursor: pointer; padding-top: 20px; padding-bottom: 20px; } .faq .card .accordionCardHeader .accordion-Title .badge { display: inline-block; width: 20px; height: 20px; line-height: 14px; float: left; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; text-align: center; background: #E91E63; color: #fff; font-size: 12px; margin-right: 20px; } .faq .card .card-body { padding: 30px; padding-left: 35px; padding-bottom: 16px; font-weight: 400; font-size: 16px; color: #6F8BA4; line-height: 28px; letter-spacing: 1px; border-top: 1px solid #F3F8FF; } .faq .card .card-body p { margin-bottom: 14px; } @media (max-width: 991px) { .faq { margin-bottom: 30px; } .faq .card .accordionCardHeader .accordion-Title { line-height: 26px; margin-top: 10px; } } 
 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <body> <section class="accordian-Section"> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <div class="accordion-Title text-center pb-3"> <h2> About </h2> </div> </div> <div class="col-md-6 offset-md-3"> <div class="faq" id="accordion"> <div class="card"> <div class="accordionCardHeader" id="accordionHeading-1"> <div class="mb-0"> <h5 class="accordion-Title" data-toggle="collapse" data-target="accordionCollapse-1" data-area-expanded="true" data-aria-controls="accordionCollapse-1"> <span class="badge">1</span> What is Lorem Ipsum? </h5> </div> </div> <div id="accordionCollapse-1" class="collapse" aria-labelledby="accordionHeading-1" data-parent="#accordion"> <div class="card-body"> <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. </p> </div> </div> </div> </div> </div> </div> </div> </section> <script src='https://code.jquery.com/jquery-2.1.0.js'></script> <script src='https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js'></script> </body>

预期：单击问题时，应显示和折叠折叠式菜单。

实际：当你点击这个问题时没有任何反应。

1 个解决方案

解决方案1
 0 已采纳  2019-05-31 14:49:46

如果声明data-target它必须是普通的CSS选择器，那么将data-target="accordionCollapse-1"更改为data-target="#accordionCollapse-1"因为您尝试打开具有id属性的div 。

有关详细信息，请参阅文档 ！ 

 .accordion-Section { background: #fdfdfd; min-height: 100vh; padding: 10vh 0 0; } .accordion-Title { position: relative; margin-bottom: 45px; display: block; font-weight: 600; line-height: 1; } .accordion-Title h2::before { content: ""; position: absolute; left: 50%; width: 60px; height: 2px; background: #E91E63; bottom: -25px; margin-left: -30px; } .accordion-Title p { padding: 0 190px; margin-bottom: 10px; } .faq { background: #FFFFFF; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-radius: 4px; } .faq .accordion { border: none; background: none; border-bottom: 1px dashed #CEE1F8; } .faq .card .accordionCardHeader { padding: 0px; border: none; background: none; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .faq .card .accordionCardHeader:hover { background: rgba(233, 30, 99, 0.1); padding-left: 10px; } .faq .card .accordionCardHeader .accordion-Title { width: 100%; text-align: left; padding: 0px; padding-left: 30px; padding-right: 30px; font-weight: 400; font-size: 15px; letter-spacing: 1px; color: #3B566E; text-decoration: none !important; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; cursor: pointer; padding-top: 20px; padding-bottom: 20px; } .faq .card .accordionCardHeader .accordion-Title .badge { display: inline-block; width: 20px; height: 20px; line-height: 14px; float: left; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; text-align: center; background: #E91E63; color: #fff; font-size: 12px; margin-right: 20px; } .faq .card .card-body { padding: 30px; padding-left: 35px; padding-bottom: 16px; font-weight: 400; font-size: 16px; color: #6F8BA4; line-height: 28px; letter-spacing: 1px; border-top: 1px solid #F3F8FF; } .faq .card .card-body p { margin-bottom: 14px; } @media (max-width: 991px) { .faq { margin-bottom: 30px; } .faq .card .accordionCardHeader .accordion-Title { line-height: 26px; margin-top: 10px; } } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <section class="accordian-Section"> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <div class="accordion-Title text-center pb-3"> <h2> About </h2> </div> </div> <div class="col-md-6 offset-md-3"> <div class="faq" id="accordion"> <div class="card"> <div class="accordionCardHeader" id="accordionHeading-1"> <div class="mb-0"> <h5 class="accordion-Title" data-toggle="collapse" data-target="#accordionCollapse-1" data-area-expanded="true" data-aria-controls="accordionCollapse-1"> <span class="badge">1</span> What is Lorem Ipsum? </h5> </div> </div> <div id="accordionCollapse-1" class="collapse" aria-labelledby="accordionHeading-1" data-parent="#accordion"> <div class="card-body"> <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. </p> </div> </div> </div> </div> </div> </div> </div> </section>

此外，此时data-target设置为h5标记而不是周围容器。 要解决此问题，您必须删除h5标记的以下属性，并使用id="accordionHeading-1"将它们添加到div ：

  • data-target="#accordionCollapse-1"
  • data-area-expanded="true"
  • data-aria-controls="accordionCollapse-1"

我还添加了CSS给框一个pointer光标： 

.accordionCardHeader {
  cursor: pointer;
}


 .accordionCardHeader { cursor: pointer; } .accordion-Section { background: #fdfdfd; min-height: 100vh; padding: 10vh 0 0; } .accordion-Title { position: relative; margin-bottom: 45px; display: block; font-weight: 600; line-height: 1; } .accordion-Title h2::before { content: ""; position: absolute; left: 50%; width: 60px; height: 2px; background: #E91E63; bottom: -25px; margin-left: -30px; } .accordion-Title p { padding: 0 190px; margin-bottom: 10px; } .faq { background: #FFFFFF; box-shadow: 0 2px 48px 0 rgba(0, 0, 0, 0.06); border-radius: 4px; } .faq .accordion { border: none; background: none; border-bottom: 1px dashed #CEE1F8; } .faq .card .accordionCardHeader { padding: 0px; border: none; background: none; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; } .faq .card .accordionCardHeader:hover { background: rgba(233, 30, 99, 0.1); padding-left: 10px; } .faq .card .accordionCardHeader .accordion-Title { width: 100%; text-align: left; padding: 0px; padding-left: 30px; padding-right: 30px; font-weight: 400; font-size: 15px; letter-spacing: 1px; color: #3B566E; text-decoration: none !important; -webkit-transition: all 0.3s ease 0s; -moz-transition: all 0.3s ease 0s; -o-transition: all 0.3s ease 0s; transition: all 0.3s ease 0s; cursor: pointer; padding-top: 20px; padding-bottom: 20px; } .faq .card .accordionCardHeader .accordion-Title .badge { display: inline-block; width: 20px; height: 20px; line-height: 14px; float: left; -webkit-border-radius: 100px; -moz-border-radius: 100px; border-radius: 100px; text-align: center; background: #E91E63; color: #fff; font-size: 12px; margin-right: 20px; } .faq .card .card-body { padding: 30px; padding-left: 35px; padding-bottom: 16px; font-weight: 400; font-size: 16px; color: #6F8BA4; line-height: 28px; letter-spacing: 1px; border-top: 1px solid #F3F8FF; } .faq .card .card-body p { margin-bottom: 14px; } @media (max-width: 991px) { .faq { margin-bottom: 30px; } .faq .card .accordionCardHeader .accordion-Title { line-height: 26px; margin-top: 10px; } } 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> <section class="accordian-Section"> <div class="container"> <div class="row"> <div class="col-md-6 offset-md-3"> <div class="accordion-Title text-center pb-3"> <h2> About </h2> </div> </div> <div class="col-md-6 offset-md-3"> <div class="faq" id="accordion"> <div class="card"> <div data-toggle="collapse" data-target="#accordionCollapse-1" data-area-expanded="true" data-aria-controls="accordionCollapse-1" class="accordionCardHeader" id="accordionHeading-1"> <div class="mb-0"> <h5 class="accordion-Title"> <span class="badge">1</span> What is Lorem Ipsum? </h5> </div> </div> <div id="accordionCollapse-1" class="collapse" aria-labelledby="accordionHeading-1" data-parent="#accordion"> <div class="card-body"> <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. </p> </div> </div> </div> </div> </div> </div> </div> </section>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 单击切换按钮时折叠菜单不会关闭 手风琴不会倒塌 当我单击可折叠菜单时，为什么它没有展开？ 边栏菜单在点击时不会折叠 为什么在屏幕尺寸过小的情况下，点击折叠按钮后无法打开？ jQuery手风琴-不会折叠 我无法让jQuery手风琴在点击时崩溃？ 手风琴在有多个手风琴时不能正常折叠 我正在尝试回答 Hackerranks 数据结构问题，但我不知道为什么这个 function 会失败 为什么div不在我右键单击的位置出现？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM