我需要帮助在使用 bootstrap 4 展开另一个时折叠一个
I need help collapsing one when expanding another using bootstrap 4
我有四张 div 卡片充当按钮，以便我可以折叠和展开卡片行下的信息。我试图将其设置为单击一张卡片时信息会在下方展开的位置，如果我单击另一张卡片，它会折叠第一个信息并展开第二个卡片的信息。但是当我出于某种原因尝试实现它时，它不会折叠卡 1 和扩展卡 2 的信息，它只是堆叠。我试着在这里查找并遇到了这个已经回答的问题。我实现了答案，但有些东西不起作用任何人都可以帮助我找出原因。这是我引用的已回答问题
Bootstrap: Collapse other sections when one is expanded
这是 post 的答案。我把它放在我的代码中，但它不起作用。
Screen Capture Of Answer
我也尝试过其他答案，但似乎没有任何效果
这是我的代码
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>
data-parent="#myGroup" 应该在有 collapse class
的 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>
我有四张 div 卡片充当按钮，以便我可以折叠和展开卡片行下的信息。我试图将其设置为单击一张卡片时信息会在下方展开的位置，如果我单击另一张卡片，它会折叠第一个信息并展开第二个卡片的信息。但是当我出于某种原因尝试实现它时，它不会折叠卡 1 和扩展卡 2 的信息，它只是堆叠。我试着在这里查找并遇到了这个已经回答的问题。我实现了答案，但有些东西不起作用任何人都可以帮助我找出原因。这是我引用的已回答问题
Bootstrap: Collapse other sections when one is expanded
这是 post 的答案。我把它放在我的代码中，但它不起作用。
Screen Capture Of Answer
我也尝试过其他答案，但似乎没有任何效果
这是我的代码
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>
data-parent="#myGroup" 应该在有 collapse class
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>