它是一个Bootstrap 4手风琴，其主体部分比平时要大，这就是为什么当该部分折叠时其下面的内容随其向上滚动的原因。
我正在使用此代码滚动到单击的标题的顶部，并取消由先前打开的部分折叠引起的滚动。
但是它似乎在崩溃前一个之前运行。 我在互联网上进行了研究，找不到解决方法。
代码很少冗长地共享相关代码段。还可以在单击标题时使用ajax填充卡体。
<div id="accordion" class="row"></div>
<script>
success: function(res) {
let resultHtml = ``;
for (let i = 0; i < res.length; i++) {
resultHtml +=
`
<div class="card col-12 px-0">
<div class="card-header" id="heading${i}">
<h5 class="mb-0">
<button class="btn btn-link w-100 text-left btn-expand" data-toggle="collapse" data-target="#collapse${i}" data-place-id="${ res[i].place_id }" aria-expanded="false" aria-controls="collapse${i}"><img class="place-icon" src="${ res[i].icon }">
${ res[i].name }
<span class="float-right">Rating: ${ getStars(res[i].rating) }</span>
</button>
</h5>
</div>
<div id="collapse${i}" class="collapse" aria-labelledby="heading${i}" data-parent="#accordion">
<div class="card-body"></div>
</div>
</div>`;
}
$("#accordion").html(resultHtml);
$('#accordion').on('hide.bs.collapse', function () {
$('html, body').animate({
scrollTop: $( event.target ).parent().offset().top
}, 400);
});
</script>
shown.bs.collapse和hidden.bs.collapse对我不起作用。
show.bs.collapse和hidde.bs.collapse正在触发，但仍然无法正常工作。
谢谢
答案 0 :(得分：2)
仅当卡体的内容比浏览器长时才会发生。 同时，仅当您使用数据父级时，它才会发生。
由于具有打开的卡身的卡头位于页面的上方，折叠组件会将下方的所有内容推到其位置。在某种程度上，它可以完成应有的功能。
因此可以选择。您要么不得不放弃在打开另一张卡片时关闭已关闭的卡片（不使用data-parent），要么使用将卡片标题滚动到顶部的脚本，这是我的选择。
我知道这不是您期望的答案，但是除非有人找到更好的解决方案，否则这些选择是我们的最佳选择。
答案 1 :(得分：1)
我修改了hidden.bs.collapse并将其更改为show.bs.collapse，并在事件发生后立即将event参数添加到function（）中
$('#accordion').on('shown.bs.collapse', function(event) {
似乎可以解决问题。
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<title>Business Info</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link rel="apple-touch-icon" href="">
<link rel="shortcut icon" href="" type="image/x-icon">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous">
<!-- Font Awesome -->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<style>
.place-icon {
height: 42px;
}
.review_user_pic {
width: 42px;
vertical-align: middle;
}
.accordion-loading {
max-width: 350px;
}
.loader-contanier {
align-items: center;
}
</style>
</head>
<body>
<div class="d-flex">
<div class="w-75 m-auto">
<div class="row place-search-form form-group mt-3">
<input class="col-12 col-md-4 form-control" type="text" name="" id="city" value="" placeholder="City" required>
<input class="col-12 col-md-4 form-control" type="text" name="" id="keyword" value="" placeholder="Keyword" required>
<input class="col-12 col-md-4 btn btn-primary" id="btn" type="button" value="search" />
</div>
<div class="controlls row mb-2">
<span class="toggle-reviews btn btn-sm btn-light m-auto col border-right">Show Reviews</span>
<span class="toggle-news btn btn-sm btn-light m-auto col">Show News</span>
</div>
<div id="accordion" class="row">
<div class="card col-12 px-0">
<div class="card-header" id="heading0">
<h5 class="mb-0">
<button class="btn btn-link w-100 text-left btn-expand" data-toggle="collapse" data-target="#collapse0" data-place-id="ChIJz8eQTjsFGTkRbTcXvpkUQC0" aria-expanded="true" aria-controls="collapse0"><img class="place-icon" src="https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png">
Hardee's
<span class="float-right">Rating: <i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i> </span>
</button>
</h5>
</div>
<div id="collapse0" class="collapse show" aria-labelledby="heading0" data-parent="#accordion" style="">
<div class="card-body">
<h5>Hardee's [Lahore]</h5>
<p>Address: MM Alam Rd, Block C 2 Gulberg III, LAHORE PAKISTAN, Lahore, Punjab, Pakistan</p><a href="https://www.hardees.com/">Website: https://www.hardees.com/</a>
<p>Alexa Rank: 126275</p>
<div class="news my-5">
<h5>News</h5>
<h6>Hardee's employee robbed while making nightly deposit - The Lebanon Enterprise</h6>
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNG-azwNvbB02Rk6UgV8lNhZHGD4JA&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=PACoW-DTLcX_zAbtxr_QCg&url=https://www.lebanonenterprise.com/content/hardee%25E2%2580%2599s-employee-robbed-while-making-nightly-deposit">The Lebanon Enterprise</a>
<br>
<hr>
<br>
<hr>
<h6>Carl's Jr., Hardee's add Froot Loops Mini Donuts to menu – and they taste just like the cereal - USA TODAY</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcQbfoZmCYgG4eQd4BVfEE6RLnVedEt6KI-ieZhJX1eB8eluTJzaDQVW7ZDxnTGsQBlc5wJd8lCb">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNFazpe2c-TITQViRcs93OKGo_JpHw&clid=c3a7d30bb8a4878e06b80cf16b898331&cid=52780024485508&ei=PACoW-DTLcX_zAbtxr_QCg&url=https://www.usatoday.com/story/money/food/2018/08/29/hardees-carls-jr-froot-loops-mini-donuts/1131551002/">USA TODAY</a>
<br>
<hr>
<h6>Win a TV! Hardee's Super Fan Contest! - WWBT NBC12 News</h6>
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNFBBsJoQp-AT_Om7OmgD65fztbJCg&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=PACoW-DTLcX_zAbtxr_QCg&url=https://www.nbc12.com/sports/super-fan/">WWBT NBC12 News</a>
<br>
<hr>
<h6>Hardee's hepatitis scare sent 2000 for treatment. Now, customers seek damages. - Charlotte Observer</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcTtapRl4pzjE6B5wGywiU4DrNF6cjxRIeXVlYdBbqcneur9rx7ZHqTCLOY8cuUD4-GWeF-qFL4m">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNEHEOa5PnMAB1ZKNQRtmymLU4mFwg&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=PACoW-DTLcX_zAbtxr_QCg&url=https://www.charlotteobserver.com/news/local/article217792415.html">Charlotte Observer</a>
<br>
<hr>
<h6>Man hospitalized, police investigating after stabbing at downtown Billings Hardee's - Billings Gazette</h6><img class="news-img" src="//t1.gstatic.com/images?q=tbn:ANd9GcTiy_FG-VGEnJE44iK5smUe5eHQOvMOO8fDGV0vqegqlBiXw8_CvVaLnp9huyEwdsoWnJUAIcmj">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNEyIlPxTEIpO7R9rqX3SCMS5S396A&clid=c3a7d30bb8a4878e06b80cf16b898331&cid=52780025325127&ei=PACoW-DTLcX_zAbtxr_QCg&url=https://billingsgazette.com/news/local/man-hospitalized-police-investigating-after-stabbing-at-downtown-billings-hardee/article_901c7f62-a313-577e-b8fd-05050d92477f.html">Billings Gazette</a>
<br>
<hr>
<h6>Hardees wants class action lawsuit dismissed after hepatitis A outbreak - WSOC Charlotte</h6><img class="news-img" src="//t0.gstatic.com/images?q=tbn:ANd9GcT6nRPPD65nzoSzjfl-hb2fV55dw5uhMxz6Ziis9mEk0TitS_ikf4BpvloDAtRoQKAh4VLDGJ6-">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNFbkOqbdy3b3jTTqfbnlaUS4VjqZQ&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=PACoW-DTLcX_zAbtxr_QCg&url=https://www.wsoctv.com/news/local/hardees-wants-class-action-lawsuit-dismissed-after-hepatitis-a-outbreak/826949737">WSOC Charlotte</a>
<br>
<hr>
<h6>Carl's Jr., Hardee's add Fruit Loops mini donuts to its menu - ABC Action News</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcQrqT9d1CqaNCeBF2km6yJJ729YjrFSGapEpzLwnc6L24XIS8QCItF8QBdIwSC3vYJgoji7n9yi">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNGB0wE313LrKUl9tIKlYzel2-9Jtw&clid=c3a7d30bb8a4878e06b80cf16b898331&cid=52780026051382&ei=PACoW-DTLcX_zAbtxr_QCg&url=https://www.abcactionnews.com/lifestyle/carl-s-jr-hardee-s-add-fruit-loops-mini-donuts-to-its-menu">ABC Action News</a>
<br>
<hr>
<h6>Hardee's launches new Froot Loops donuts - wtkr.com</h6><img class="news-img" src="//t2.gstatic.com/images?q=tbn:ANd9GcR0aaGT_ChbJdl17xUHff9ZCGIOJoo18VenPxv8uBy25tyKEGeoaw9RxbMY4QyGEvsURxsykJjl">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNHaVXPnV5OjAfyn8nRc4avb9A9ShQ&clid=c3a7d30bb8a4878e06b80cf16b898331&cid=52780023879969&ei=PACoW-DTLcX_zAbtxr_QCg&url=https://wtkr.com/2018/08/28/hardees-launches-new-froot-loops-donuts/">wtkr.com</a>
<br>
<hr>
<h6>WANTED: Suspect who allegedly robbed Verizon store wearing Hardee's uniform - KMOV.com</h6><img class="news-img" src="//t1.gstatic.com/images?q=tbn:ANd9GcSdpLX4twIv0VQpXhaNoiszqGYZzExA_4KOmVVn-Xhp3cYxboKKY_z4QOoA8FItq-JGGLtp0W2f">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNEYimeqG2KUffZqcw1e8mdGX5FXig&clid=c3a7d30bb8a4878e06b80cf16b898331&cid=52780048450108&ei=PACoW-DTLcX_zAbtxr_QCg&url=https://www.kmov.com/news/wanted-suspect-who-allegedly-robbed-verizon-store-wearing-hardee-s/article_2276a4d0-bac0-11e8-b0e0-efdd94499d26.html">KMOV.com</a>
<br>
<hr>
</div>
</div>
</div>
</div>
<div class="card col-12 px-0">
<div class="card-header" id="heading1">
<h5 class="mb-0">
<button class="btn btn-link w-100 text-left btn-expand collapsed" data-toggle="collapse" data-target="#collapse1" data-place-id="ChIJV_dJILEDGTkRy_qFDSboqXE" aria-expanded="false" aria-controls="collapse1"><img class="place-icon" src="https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png">
Builder's fast food
<span class="float-right">Rating: <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> </span>
</button>
</h5>
</div>
<div id="collapse1" class="collapse" aria-labelledby="heading1" data-parent="#accordion" style="">
<div class="card-body">
<h5>Builder's fast food [Lahore]</h5>
<p>Address: Hadayatullah Block Hidayatullah Block Mustafa Town, Lahore, Punjab, Pakistan</p>
<p>Phone: 0321 4880266</p>
<div class="reviews">
<h5>Reviews</h5>
<h6><img class="review_user_pic" src="https://lh5.googleusercontent.com/-uq1iF8RXHWY/AAAAAAAAAAI/AAAAAAAAABM/8nmKcVJW6NM/s128-c0x00000000-cc-rp-mo/photo.jpg"> Farooq Ahmad</h6>
<p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star"
aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> </p>
<p>Tower Burger is best and economical. taste 10/10</p>
<h6><img class="review_user_pic" src="https://lh5.googleusercontent.com/-Wy1XoJ_yLRw/AAAAAAAAAAI/AAAAAAAAARA/A8TB7flwH0g/s128-c0x00000000-cc-rp-mo/photo.jpg"> Danyal Tayyub</h6>
<p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star"
aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> </p>
<p>Best burgers in mustafa town. Anyone here should try the tower burger or the special b.b.q burger. Econimical and tasty.</p>
<h6><img class="review_user_pic" src="https://lh3.googleusercontent.com/-oS3hcw6fNO8/AAAAAAAAAAI/AAAAAAAAAAA/AAN31DXJHJ3EpFV0bMGRJ1EPYKNdkhK0aQ/s128-c0x00000000-cc-rp-mo/photo.jpg"> Zahid Butt</h6>
<p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star"
aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> </p>
<p>They got taste</p>
<h6><img class="review_user_pic" src="https://lh6.googleusercontent.com/-5aFQHnOjxjU/AAAAAAAAAAI/AAAAAAAAACw/iX4DvHKKSe8/s128-c0x00000000-cc-rp-mo/photo.jpg"> Zain Ul-Abdien</h6>
<p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star-o"
aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i> </p>
<p>Tower burger is a good food item here</p>
<h6><img class="review_user_pic" src="https://lh6.googleusercontent.com/-wjn4dOHojb4/AAAAAAAAAAI/AAAAAAAACrQ/_FzUl32-9CQ/s128-c0x00000000-cc-rp-mo-ba2/photo.jpg"> Abdur Rehman</h6>
<p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star"
aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> </p>
<p>They are just like my home kitchen!! Not only me but my parents and friends like their quality of services and awesome food.</p>
</div>
<div class="news my-5">
<h5>News</h5>
<h6>Editorial: Elusive affordable housing - Concord Monitor</h6>
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNGD-ymByhPY1_N2hwSTrLRjj_5wAQ&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=VwGoW-DRBOLWzAa46YHwAw&url=https://www.concordmonitor.com/Affordable-housing-20343023">Concord Monitor</a>
<br>
<hr>
<h6>Philippines' Richest 2018: Billionaire Builders Push Ahead With Infrastructure Projects - Forbes</h6><img class="news-img" src="//t2.gstatic.com/images?q=tbn:ANd9GcSHToUtbJIxQJdejqs-zYMplTMD5622lRSUegKgxz5DG2DTo9jfOQSEjFaAKu41aqWjkfizJ7m5">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNG88AFoV2W1ROsfiPiTaM7jyrgHmw&clid=c3a7d30bb8a4878e06b80cf16b898331&cid=52780033582226&ei=VwGoW-DRBOLWzAa46YHwAw&url=https://www.forbes.com/sites/forbesasia/2018/09/05/philippines-richest-2018-billionaire-builders-push-ahead-with-infrastructure-projects/">Forbes</a>
<br>
<hr>
<h6>Watermark has become full service waterfront builder and permit specialist - The Laconia Daily Sun</h6>
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNGeKO9qStU4sJ1zfj-HTD-LnjXUmw&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=VwGoW-DRBOLWzAa46YHwAw&url=https://www.laconiadailysun.com/news/local/watermark-has-become-full-service-waterfront-builder-and-permit-specialist/article_a5581aa2-a718-11e8-9792-6f0f1030633f.html">The Laconia Daily Sun</a>
<br>
<hr>
<br>
<hr>
<hr>
<h6>House builders sign up to NHS scheme to transform homes into healthier environments - Care Appointments</h6>
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNGE8xW07YXKfLIGwTvDNKpK1r8U9g&clid=c3a7d30bb8a4878e06b80cf16b898331&cid=52780022632690&ei=VwGoW-DRBOLWzAa46YHwAw&url=https://www.careappointments.co.uk/care-news/england/item/44966-house-builders-sign-up-to-nhs-scheme-to-transform-homes-into-healthier-environments">Care Appointments</a>
<br>
<hr>
<h6>Why Tech Fails Can (Sometimes) Be Inconveniently Fun - PYMNTS.com</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcR7CpJkSw9PE0-8TZ_2hsAxA2SKm7ISsqeDccUhYXsI1tFrQ4w1h8wLOYBka0SIf9C4X90KBlzJ">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNEUP4c3BTp_jPvpY--Y6D1Ov1XzMg&clid=c3a7d30bb8a4878e06b80cf16b898331&cid=52780051465673&ei=VwGoW-DRBOLWzAa46YHwAw&url=https://www.pymnts.com/news/merchant-innovation/2018/nest-hello-facial-recognition-tech-failures-secure-door-locks/">PYMNTS.com</a>
<br>
<hr>
<h6>New College Rankings Are Out—Including Some That Are Actually Useful - The Atlantic</h6>
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNEKhwsRM7HEIF-Wo7wqM6Sr6qMDQg&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=VwGoW-DRBOLWzAa46YHwAw&url=https://www.theatlantic.com/notes/2018/09/new-college-rankings-are-outincluding-some-that-are-actually-useful/569809/">The Atlantic</a>
<br>
<hr>
<br>
<hr>
</div>
</div>
</div>
</div>
<div class="card-header" id="heading4">
<h5 class="mb-0">
<button class="btn btn-link w-100 text-left btn-expand collapsed" data-toggle="collapse" data-target="#collapse4" data-place-id="ChIJF-a0kf0PGTkRO1AS0gHk19A" aria-expanded="false" aria-controls="collapse4"><img class="place-icon" src="https://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png">
Fresho Fast Food
<span class="float-right">Rating: <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i> </span>
</button>
</h5>
</div>
<div id="collapse4" class="collapse" aria-labelledby="heading4" data-parent="#accordion" style="">
<div class="card-body">
<h5>Fresho Fast Food [Lahore]</h5>
<p>Address: mail canal bank road qazi chowk lahore، saeed block Jehangir Rd, Fatehgarh, Lahore, Punjab 5400, Pakistan</p>
<p>Phone: 0315 6678546</p>
<div class="reviews">
<h5>Reviews</h5>
<h6><img class="review_user_pic" src="https://lh4.googleusercontent.com/-IgaCGgMId34/AAAAAAAAAAI/AAAAAAAAAAA/AAN31DXi4TyOoucvJQqLyrJPw22Ewdad8g/s128-c0x00000000-cc-rp-mo/photo.jpg"> Huma Usman</h6>
<p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star"
aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> </p>
<p>Yummy food at reasonable price</p>
<h6><img class="review_user_pic" src="https://lh5.googleusercontent.com/-8B9TZBtFc1E/AAAAAAAAAAI/AAAAAAAAAAA/AAN31DWNWg5XdduwC2ur6jipXIPWPwae3A/s128-c0x00000000-cc-rp-mo-ba3/photo.jpg"> Ameer Hamza</h6>
<p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star"
aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i> </p>
<p>Normal prices, good taste.</p>
<h6><img class="review_user_pic" src="https://lh5.googleusercontent.com/-wmiL4ptMORg/AAAAAAAAAAI/AAAAAAAANaA/Ee5jDtTomEI/s128-c0x00000000-cc-rp-mo-ba2/photo.jpg"> Raja Aurongzeb</h6>
<p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star"
aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> </p>
<p>Good place run by four boys, very hard-working and their quality of products are very good.</p>
<h6><img class="review_user_pic" src="https://lh5.googleusercontent.com/-hvZErP8QEpM/AAAAAAAAAAI/AAAAAAAAFJo/Kldqo2_-NSA/s128-c0x00000000-cc-rp-mo-ba3/photo.jpg"> Shabbir Ahmad Nadeem</h6>
<p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star"
aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> </p>
<p>Awesome food. Fresh and delicious fast food within minutes. Good staff.</p>
<h6><img class="review_user_pic" src="https://lh6.googleusercontent.com/-g7U0UnzPDV4/AAAAAAAAAAI/AAAAAAAAQQY/kTKNa_tBGiQ/s128-c0x00000000-cc-rp-mo-ba3/photo.jpg"> Usman Azeem 676</h6>
<p><i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star" aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star-o"
aria-hidden="true" style="color: gold;"></i> <i class="fa fa-star-o" aria-hidden="true" style="color: gold;"></i> </p>
<p>Tasty fast food but bow there are going dirty</p>
</div>
<div class="news my-5">
<h5>News</h5>
<h6>How to Fold the Perfect Burrito - The Manual</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcRiFYGx0TJMe8B-8rVHQ2YBXomUF9N9DF5nywREcASLizsPfLvnMzlHYBwBLtB-_fUXQ2kkYzBq">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNF5-uHDtvATkuyGu1kikh-IgGBndw&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=VACoW6iZD4qS-waojJ_gBw&url=https://www.themanual.com/food-and-drink/how-to-fold-a-burrito/">The Manual</a>
<br>
<hr>
<h6>How to tell if your eggs are fresh or have expired - Times of India</h6><img class="news-img" src="//t2.gstatic.com/images?q=tbn:ANd9GcRGtLfmw8sszOq6j94gbyhfpCDqWQWMnJ-9_Gj_4PCEwwnO9t-wDXUDyPbn1p3gW8fMFvnKZnqx">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNG52TVwMMUZdbbV-KSse8okk9Zbkg&clid=c3a7d30bb8a4878e06b80cf16b898331&cid=52779046224155&ei=VACoW6iZD4qS-waojJ_gBw&url=https://timesofindia.indiatimes.com/life-style/health-fitness/diet/How-to-tell-if-your-eggs-are-fresh-or-have-expired/articleshow/50930165.cms">Times of India</a>
<br>
<hr>
<h6>3 Pepper Burrito Co. adds flavor to fast-casual Tex-Mex - The News-Press</h6><img class="news-img" src="//t1.gstatic.com/images?q=tbn:ANd9GcTyaO5yjNQP76ypCKhhG_88cnnalWpekjCoPg8_Fvlu1hpFV3LyvWiprzY3XoAvoYB8RDzM9zXk">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNFXNFDmFzOU6QbDUid0ah49KtRxkQ&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=VACoW6iZD4qS-waojJ_gBw&url=https://www.news-press.com/story/life/food/2015/01/06/pepper-burrito-co-adds-flavor-fast-casual-tex-mex/21359673/">The News-Press</a>
<br>
<hr>
<h6>The Definitive Best Time To Buy A Christmas Tree - HuffPost</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcQy9r5DVRsa9Hehj4yZ_o-Al_25RkbS6qxPFsLxvpvfd8rstUH1QgpX7HAQwN08NfsqCUmwEVbh">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNGXkXXGl5w9iUL8pQt_pHid7NJcFQ&clid=c3a7d30bb8a4878e06b80cf16b898331&cid=52779665752618&ei=VACoW6iZD4qS-waojJ_gBw&url=https://www.huffingtonpost.com/entry/the-definitive-best-time-to-buy-a-christmas-tree_us_5a01e74de4b085d72ae06d67">HuffPost</a>
<br>
<hr>
<h6>BigBasket Ready To Launch Private Labels To Ramp Up Cosmetics And Meat Business - Inc42 Media</h6><img class="news-img" src="//t2.gstatic.com/images?q=tbn:ANd9GcTGPmGxkmGXWc5xU9Ov7TCPiv0drpP33-HycqadVlVmjMlCT4xN-lnJDMkHDqen6NgRTBO_ZMdb">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNEay6XVsPh75JRnU_tNEriUEgLpBA&clid=c3a7d30bb8a4878e06b80cf16b898331&cid=52779921127901&ei=VACoW6iZD4qS-waojJ_gBw&url=https://inc42.com/buzz/bigbasket-ready-to-scoop-up-cosmetics-and-meat-business/">Inc42 Media</a>
<br>
<hr>
<h6>Steve Cahalan: Cafe opens in Gays Mills food co-op - La Crosse Tribune</h6><img class="news-img" src="//t3.gstatic.com/images?q=tbn:ANd9GcTQ0bTIcbgg9n3GnzYy5yZnWeHfrtdj8GR8v0UQOrSKBnWi4ApiN_de6IEDtHL4aCkxHVFLfvFM">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNEReWHTqXzGbU0gDxEvnicWbT7GPQ&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=VACoW6iZD4qS-waojJ_gBw&url=https://lacrossetribune.com/business/steve-cahalan-cafe-opens-in-gays-mills-food-co-op/article_07370afc-9994-52dd-ae60-1266bf64c819.html">La Crosse Tribune</a>
<br>
<hr>
<br>
<hr>
<h6>In 3 years Bigbasket will be among the top 3 players in F&G: CEO - India Retailing</h6><img class="news-img" src="//t0.gstatic.com/images?q=tbn:ANd9GcTwSMFRXmcLSaNeMc_CnWJHv8bUOAsaY_wRENq8QNSeEI5wJMPon5K6dIECZNTNsVkMx1iPYJT9">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNEYBvXAK4UHHBWwJS7fPSkKqw8BcQ&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=VACoW6iZD4qS-waojJ_gBw&url=https://www.indiaretailing.com/2016/07/14/food/food-grocery/in-3-years-bigbasket-will-be-among-the-top-3-players-in-fg-ceo/">India Retailing</a>
<br>
<hr>
<h6>BigBasket to expand private labels, products in next three months - Livemint</h6><img class="news-img" src="//t0.gstatic.com/images?q=tbn:ANd9GcQFXdV6uB3Yr8eJq-T76qSX170vTISfc1ajsWHYN4J4Cl3s2_1tMaAT8fLseQSMA-R7dECRDZfs">
<p></p><a href="http://news.google.com/news/url?sa=t&fd=R&ct2=us&usg=AFQjCNFaAGJ6Z-bg__W4xLxGUNROop2a-w&clid=c3a7d30bb8a4878e06b80cf16b898331&ei=VACoW6iZD4qS-waojJ_gBw&url=https://www.livemint.com/Companies/jv1qjU1oS7b7fZT8Hfe0DM/BigBasket-to-expand-private-labels-products-in-next-three-m.html">Livemint</a>
<br>
<hr>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js" integrity="sha384-uefMccjFJAIv6A+rW+L4AHf99KvxDjWSu1z9VI8SKNVmz4sk7buKt/6v9KI65qnm" crossorigin="anonymous"></script>
<script>
$('#accordion').on('shown.bs.collapse', function(event) {
$('html, body').animate({
scrollTop: $(event.target).parent().offset().top
}, 400);
});
</script>
</body>
</html>
答案 2 :(得分：0)
我实际上有一个与海报类似的问题，并且无法完全获得上述答案来为我工作。由于我没有添加样式表，因此用户界面可能已关闭，但是您可以在此处找到未修改的代码-MDBoostrap - Accordian Example
<div class="accordion" id="accordionExample">
<div class="header-card" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseOne"
aria-expanded="false" aria-controls="collapseOne">
Q: Is This An Accordian Example?
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
data-parent="#accordionExample">
<div class="card-body">
<h5><span class="label label-primary">Answer</span></h5>
Yes In Fact It Is An Accordian Example I Found On The Internet
</div>
</div>
</div>
这是在引导程序中应用相同效果的另一种方法。不需要额外的JS。