我的网站上有一个引导 Accordion ，我试图通过单击使页面下降到面板主体的底部。目前，如果您单击其中一张图像，您可能不会注意到它会展开为 Accordion ，图片下方有文字。因此，当有人单击图片时，我希望页面单击时转到所选面板主体的底部。
要查看示例，请访问 https://codepen.io/aahmed2/pen/rmEojo?editors=1000
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<div class="row health-main">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading pet-health" alt="Cat on sidewalk" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseTwo" aria-expanded="false" aria-controls="collapseOne" role="tab" id="headingTwo">
<h2>Pet Health & Safety</h2>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="/resources/pet-diseases.asp"><h4>Pet Diseases</h4></a>
<!--<a href="/resources/pet-allergies.asp"><h4>Pet Allergies</h4></a>-->
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading livestock-health" alt="Young cow near barn" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree" role="tab" id="headingThree">
<h2>Livestock Health & Safety</h2>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="/resources/livestock-disease.asp"><h4>Livestock Diseases</h4></a>
<!--<a href="/resources/livestock-allergies.asp"><h4>Livestock Allergies</h4></a>-->
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading wildlife" alt="Raccoon" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix" role="tab" id="headingSix">
<h2>Wildlife Health & Safety</h2>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<a href="/resources/wildlife-disease.asp"><h4>Wildlife Diseases</h4></a>
<a href="http://wildlife.unl.edu/damage-management"><h4>Wildlife Damage Management</h4></a>
<a href="/resources/wildlife-conservation.asp"><h4>Wildlife Conservation</h4></a>
</div>
</div>
</div>
</div>
</div>
<div class="row health-main">
<div class="panel-group" id="accordion2" role="tablist" aria-multiselectable="true">
<div class="panel panel-default col-md-4">
<div class="panel-heading human-health" alt="Person sitting next to dog in a park" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour" role="tab" id="headingFour">
<h2>Human Health & Safety</h2>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<a href="/resources/zoonotic-diseases.asp"><h4>Zoonotic Diseases</h4></a>
<a href="/resources/human-allergies.asp"><h4>Allergies</h4></a>
<a href="/resources/sanitation.asp"><h4>Sanitation</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading insect-tick-mite" alt="Bee on flower" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne" role="tab" id="headingOne">
<h2>Insects, Ticks, and Mites</h2>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="/resources/insect-tick-mite.asp"><h4>Diseases</h4></a></a>
<a href="/resources/pests.asp"><h4>Pests</h4></a>
<a href="/resources/pollinator-health.asp"><h4>Pollinator Health</h4></a>
</div>
</div>
</div>
<div class="panel panel-default col-md-4">
<div class="panel-heading eco-health" alt="Woman holding child's hand walking down a trail" data-toggle="collapse" data-parent="#accordion,#accordion2" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive" role="tab" id="headingFive">
<h2>Ecosystem Health</h2>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<a href="/resources/plant-health.asp"><h4>Plant Health</h4></a>
<a href="/resources/water-quality.asp"><h4>Water Quality</h4></a>
<a href="/resources/air-quality.asp"><h4>Air Quality</h4></a>
<a href="/resources/soil-quality.asp"><h4>Soil Quality</h4></a>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
CSS
.health-main #accordion {
margin-top: 25px;
cursor: pointer;
}
.health-main #accordion2 {
margin-top: -19px;
cursor: pointer;
margin-bottom: 0px;
}
.health-main .panel-heading:focus {
border: none;
outline: 0;
}
.health-main .panel-group {
clear: both;
}
.health-main .panel-group .panel {
border-radius: 0%;
border-width: 0;
padding: 0 !important;
}
.health-main .panel-group .panel-heading {
background-color: rgba(0,0,0,1);
border-radius: 0%;
color: #fff;
height: 350px;
text-align: center;
}
.health-main .panel-group .panel-heading h2 {
font-size: 1.99em;
text-transform: none;
color: #fff;
margin-top: 140px;
text-shadow: 2px 2px 3px #333332;
}
.health-main .panel-group .panel-heading a:active, .health-main .panel-group .panel-heading a:visited, .health-main .panel-group .panel-heading a:focus {
text-decoration: none !important;
}
.health-main .panel-group .insect-tick-mite {
background: url(http://www.slate.com/content/dam/slate/articles/double_x/the_kids/2015/05/150522_KIDS_Tick.jpg.CROP.promo-mediumlarge.jpg) bottom no-repeat;
background-size: cover;
}
.health-main .panel-group .pet-health {
background: url(https://static.pexels.com/photos/126407/pexels-photo-126407.jpeg) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .livestock-health {
background: url(https://articles.extension.org//sites/default/files/styles/large/public/CalfEarlyIDFig1.jpg) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .wildlife {
background: url(https://abcwildlife.com/wp-content/uploads/2015/05/Raccoon-Control-Identifying-Raccoon-Damage.jpg) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .human-health {
background: url(https://www.gatescambridge.org/sites/www.gatescambridge.org/files/styles/flexslider_full_900x500/public/3node072child_and_dog.jpg?itok=Tsuklx_F) center center no-repeat;
background-size: cover;
}
.health-main .panel-group .eco-health {
background: url(http://guelph.ca/wp-content/uploads/trees.jpg) bottom no-repeat;
background-size: cover;
}
.health-main .panel-group .panel-collapse {
background-color: #c1c0be;
}
.health-main .panel-group .panel-body {
padding-top: 20px;
padding-bottom: 30px;
text-align: center;
}
.health-main .panel-group a {
color: #000000;
}
.health-main .panel-group a:hover {
color: #fff;
text-decoration: none;
}
.health-main .panel-group > .panel {
margin-top: 5px;
}
最佳答案
您需要做的是 Hook Accordion 的引导显示事件shown.bs.collapse。这样您就可以在 Accordion 完成展开后获取包装元素的高度。然后您就拥有了实现您想要的目标所需的一切。我对代码进行了注释，以帮助您了解我所做的事情。该脚本应放置在 jQuery 和 Bootstrap JS 包含之后。
<script type="text/javascript">
$(document).ready(function() {
// do something when accordion has finished expanding the relevent element
$('.panel-collapse').on('shown.bs.collapse', function() {
// $(this).parent().offset().top gets the top position of the parent element.
// $(window).height() gets the height of the window.
// $(this).parent().height() gets the height of the parent element.
// Subtract the top position of the parent element by the height of the window minus the height of the parent elements height.
var scroll = $(this).parent().offset().top - ( $(window).height() - $(this).parent().height() );
// animate the window scroll by the stored scroll variable.
// The 500 is how long the scroll takes in milliseconds.
$('html, body').animate({
scrollTop: scroll
}, 500);
})
});
</script>
关于javascript - 单击使页面向下移动到 Bootstrap Accordion 面板主体的底部，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44268861/