在使用Bootstrap 4扩展另一个时，我需要折叠一个帮助

Question

I have four div cards that act as buttons so that I can collapse and expand information under the row of cards. 我有四个用作按钮的div卡，以便可以折叠和展开卡行下的信息。 I'm trying to have it to where when I click one card the information expands below and if I click a different card it collapses the first information and expands the second card's information. 我试图将其放置到单击某张卡片时的位置，该信息会在下面展开；如果我单击另一张卡片，则该信息会折叠第一张信息，并展开第二张卡的信息。 but when I tried to implement that for some reason its not collapsing card 1 and epanding card 2's information its just stacking. 但是当我出于某种原因尝试实现它时，它不会折叠卡1并扩展卡2的信息，它只是在堆叠。 I tried looking it up here and came across this question that was already answered. 我试图在这里查找它，并遇到了已经回答的问题。 I implemented the answer but something's not working could anyone help me figure out why. 我实现了答案，但是有什么不起作用的人可以帮助我找出原因。 here's the answered question I referenced 这是我引用的已回答问题

Bootstrap: Collapse other sections when one is expanded 引导程序：展开一个区域时折叠其他区域

This is the answer to that post. 这是该帖子的答案。 I put that in my code but it doesn't work. 我把它放在我的代码中，但是不起作用。

Screen Capture Of Answer 答案的屏幕截图

I've also tried other answers but nothing seems to work 我也尝试了其他答案，但似乎无济于事

here is my code 这是我的代码

 p, h1 { font-family: 'Droid Sans', sans-serif; } .containerS { margin-right: 2%; margin-left: 2%; } .card:hover { -webkit-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75); -moz-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75); box-shadow: -1px 9px 40px -12px rgba(0, 0, 0, 0.75); transform: scale(1.02) } .card { border-radius: 3px; border: 1px solid #bb9c4c; overflow: hidden; padding-bottom:10px; margin: 20px 0px 0px 0px; align: center; transition: transform .1s; color: black; } .card img { transition: transform .1s } .card img:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.01); } .btn { background-color: #bb9c4c; border-color: #bb9c4c; } .card-body { padding: 10px; } .services { background-color:#242424; color:white; padding:90px 0 90px; text-align:center; overflow: hidden; } .services h1 { font-size:2em; padding-bottom: 30px; } .services h3 { font-weight:normal; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 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"> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> <title>Hello, world!</title> </head> <body> <div class="services" id="services"> <div class="containerS"> <div class="row"> <div class="col-lg-12 col-md-12"> <h1>Meow</h1> </div> </div> <div id="myGroup"> <div class="row"> <div id="mentor" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.2s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample1" data-parent="#myGroup" role="button" aria-expanded="false" aria-controls="collapseExample1"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 1</h5> </div> </div> </div> <div id="sales" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.3s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample2" data-parent="#myGroup" role="button" aria-expanded="false" aria-controls="collapseExample2"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 2</h5> </div> </div> </div> <div id="strat" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.4s"> <div class="card" style="width:100%" data-toggle="collapse" data-target="#collapseExample3" data-parent="#myGroup" role="button" aria-expanded="false" aria-controls="collapseExample3"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 3</h5> </div> </div> </div> <div id="security" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.5s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample4" data-parent="#myGroup" role="button" aria-expanded="false" aria-controls="collapseExample4"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 4</h5> </div> </div> </div> </div> <div class="accordion-group"> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample1" style="width:100%;"> <div class="card card-body" style="width:100%"> 1Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample2" style="width:100%;"> <div class="card card-body" style="width:100%"> 2Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample3" style="width:100%;"> <div class="card card-body" style="width:100%"> 3Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample4" style="width:100%;"> <div class="card card-body" style="width:100%"> 4Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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> </body> </html>

Answer 1

the data-parent="#myGroup" should be in the div that have the collapse class data-parent="#myGroup"应该在具有collapse类的div中

 p, h1 { font-family: 'Droid Sans', sans-serif; } .containerS { margin-right: 2%; margin-left: 2%; } .card:hover { -webkit-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75); -moz-box-shadow: -1px 9px 40px -12px rgba(0,0,0,0.75); box-shadow: -1px 9px 40px -12px rgba(0, 0, 0, 0.75); transform: scale(1.02) } .card { border-radius: 3px; border: 1px solid #bb9c4c; overflow: hidden; padding-bottom:10px; margin: 20px 0px 0px 0px; align: center; transition: transform .1s; color: black; } .card img { transition: transform .1s } .card img:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); transform: scale(1.01); } .btn { background-color: #bb9c4c; border-color: #bb9c4c; } .card-body { padding: 10px; } .services { background-color:#242424; color:white; padding:90px 0 90px; text-align:center; overflow: hidden; } .services h1 { font-size:2em; padding-bottom: 30px; } .services h3 { font-weight:normal; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- 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"> <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Droid+Sans' rel='stylesheet' type='text/css'> <title>Hello, world!</title> </head> <body> <div class="services" id="services"> <div class="containerS"> <div class="row"> <div class="col-lg-12 col-md-12"> <h1>Meow</h1> </div> </div> <div id="myGroup"> <div class="row"> <div id="mentor" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.2s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample1"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 1</h5> </div> </div> </div> <div id="sales" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.3s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample2"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 2</h5> </div> </div> </div> <div id="strat" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.4s"> <div class="card" style="width:100%" data-toggle="collapse" data-target="#collapseExample3" role="button" aria-expanded="false" aria-controls="collapseExample3"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 3</h5> </div> </div> </div> <div id="security" class="colo-lg-3 col-md-3 col-sm-3 col-xs-6 wow flipInY" data-wow-delay="0.5s"> <div class="card" style="width:100%;" data-toggle="collapse" data-target="#collapseExample4" role="button" aria-expanded="false" aria-controls="collapseExample4"> <img src="https://images.pexels.com/photos/104827/cat-pet-animal-domestic-104827.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260" alt="Card One" class="card-img-top" style="width:100%;"> <div class="card-body"> <h5 class="card-title">Meow 4</h5> </div> </div> </div> </div> <div class="accordion-group"> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample1" data-parent="#myGroup" style="width:100%;"> <div class="card card-body" style="width:100%"> 1Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample2" data-parent="#myGroup" style="width:100%;"> <div class="card card-body" style="width:100%"> 2Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample3" data-parent="#myGroup" style="width:100%;"> <div class="card card-body" style="width:100%"> 3Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> <div class="collapse colo-lg-12 col-md-12 indent" id="collapseExample4" data-parent="#myGroup" style="width:100%;"> <div class="card card-body" style="width:100%"> 4Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.Mauris tempor vulputate dolor, nec convallis turpis luctus quis. Morbi id justo vel diam dignissim commodo. Aenean id luctus libero, vel gravida magna. Vestibulum ac purus lobortis, varius tellus non, rhoncus sapien. Mauris elementum, nisl sed interdum venenatis, metus enim pellentesque massa, eget laoreet eros ex vitae felis. Curabitur vitae rhoncus odio, sit amet porta tortor. Duis in mollis odio. </div> </div> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <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> </body> </html>

在使用Bootstrap 4扩展另一个时，我需要折叠一个帮助

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-10-29 17:14:17

在使用Bootstrap 4扩展另一个时，我需要折叠一个帮助

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-10-29 17:14:17

解决方案1
0 已采纳 2018-10-29 17:14:17