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

Question

I am trying to create an accordion menu that allows me to make my answers hidden and only appear at the click of the question. 我正在尝试创建一个手风琴菜单，允许我隐藏我的答案，只出现在问题的点击。 For some reason when you click on the question nothing happens. 出于某种原因，当您点击该问题时，没有任何反应。

my code: 我的代码：

 .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>

Expected: Accordion menu should appear and collapse when you click the question. 预期：单击问题时，应显示和折叠折叠式菜单。

Actual: When you click on the question nothing happens. 实际：当你点击这个问题时没有任何反应。

Answer 1

If you declare the data-target it has to be a normal CSS selector, so change data-target="accordionCollapse-1" to data-target="#accordionCollapse-1" since you try to open a div that has an id attribute. 如果声明data-target它必须是普通的CSS选择器，那么将data-target="accordionCollapse-1"更改为data-target="#accordionCollapse-1"因为您尝试打开具有id属性的div 。

Refer to the documentation for more info! 有关详细信息，请参阅文档！

 .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>

Also, at this moment the data-target is set to the h5 tag and not the surrounding container. 此外，此时data-target设置为h5标记而不是周围容器。 To fix this you have to remove the following attributes of your h5 tag and add them to your div with the id="accordionHeading-1" : 要解决此问题，您必须删除h5标记的以下属性，并使用id="accordionHeading-1"将它们添加到div ：

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

I also added CSS to give the box a pointer cursor: 我还添加了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>

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

问题描述

1 个解决方案

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

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

问题描述

1 个解决方案

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

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