jQuery slideToggle 和 scrollTop 不能一起工作
jQuery slideToggle and then scrollTop not working togther
我正在尝试从元素底部关闭 slideToggle,然后让浏览器 window 滚动到其上方的 header。这就是我的进展。
JavaScript
jQuery(".closedetails").click(function () {
$closedetails = $(this);
$morecontent = $(this).parents(".hotel");
// Close more content when clicked
$morecontent.slideToggle(500, function () {
if($morecontent.is(":visible")){
$("html, body").animate({scrollTop: $morecontent.prev(".header").offset().top });
}
});
});
HTML
<div class="header">
<h3>Hotel header</h3>
</div>
<div class="hotel">
<p>Springhill Suites by Marriott is a 3-star hotel located on the westside of Flagstaff near Northern Arizona University. This modern hotel offers large, stylish rooms with a comfortable seating and desk area. All rooms also include a trundle (pull-out) bed.</p>
<div class="more-container">
<div class="more-header">More details</div>
<div class="more-content" style="display: block;">
<div class="desc"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et sollicitudin est. Nam id dolor mi. Integer nunc arcu, vehicula ac ligula eu, placerat sagittis eros. Duis consequat dolor quis luctus finibus. Nullam vel scelerisque tortor, quis vehicula sapien. Duis id venenatis dolor, nec ultricies quam. Proin faucibus, enim at lacinia aliquet, neque sem convallis arcu, vitae ullamcorper felis metus a nunc. Morbi enim felis, bibendum sit amet lorem a, iaculis tristique tortor. Nunc orci ex, pellentesque non purus sit amet, feugiat malesuada nulla. Mauris vel purus sem. Proin commodo nibh justo, vel interdum erat dignissim interdum. Suspendisse at magna nec est rutrum pretium ac sed turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque commodo risus erat, et ultricies nisl commodo eu. Donec ut pharetra dui.</p>
<p>Donec feugiat lacus sapien, in cursus ex tristique eget. Sed sit amet ipsum leo. Cras aliquam ac nunc sed dapibus. In semper ullamcorper est, tempor ultrices elit fermentum ac. Suspendisse vel eros non mi porta dignissim. Morbi consectetur blandit enim ut finibus. Maecenas viverra lectus vel nisi dignissim, eget ultrices ante ultrices.</p>
<p>Cras eget justo aliquam, rhoncus mauris at, viverra enim. Nam sit amet quam nec mauris pellentesque dictum id a enim. Cras velit nisl, imperdiet a dolor quis, rhoncus tincidunt risus. Donec a orci augue. Suspendisse at augue at mauris bibendum euismod. Sed nec molestie tortor. Etiam nec volutpat dolor. Proin suscipit scelerisque lectus, a eleifend diam gravida eu. Phasellus viverra dolor magna.</p>
</div>
<div class="closedetails">CLOSE MORE DETAILS </div>
</div>
</div>
</div>
你会得到一个奇怪的效果,向上滑动然后在回调中再次滑动。不过给你...
jQuery(".closedetails").click(function () {
$closedetails = $(this);
$morecontent = $(this).parents(".hotel");
// Close more content when clicked
$morecontent.stop(true).slideUp(100,function () {
$("html, body").stop(true).animate({scrollTop: $morecontent.prev(".header").offset().top }, 300);
});
我正在尝试从元素底部关闭 slideToggle,然后让浏览器 window 滚动到其上方的 header。这就是我的进展。
JavaScript
jQuery(".closedetails").click(function () {
$closedetails = $(this);
$morecontent = $(this).parents(".hotel");
// Close more content when clicked
$morecontent.slideToggle(500, function () {
if($morecontent.is(":visible")){
$("html, body").animate({scrollTop: $morecontent.prev(".header").offset().top });
}
});
});
HTML
<div class="header">
<h3>Hotel header</h3>
</div>
<div class="hotel">
<p>Springhill Suites by Marriott is a 3-star hotel located on the westside of Flagstaff near Northern Arizona University. This modern hotel offers large, stylish rooms with a comfortable seating and desk area. All rooms also include a trundle (pull-out) bed.</p>
<div class="more-container">
<div class="more-header">More details</div>
<div class="more-content" style="display: block;">
<div class="desc"><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer et sollicitudin est. Nam id dolor mi. Integer nunc arcu, vehicula ac ligula eu, placerat sagittis eros. Duis consequat dolor quis luctus finibus. Nullam vel scelerisque tortor, quis vehicula sapien. Duis id venenatis dolor, nec ultricies quam. Proin faucibus, enim at lacinia aliquet, neque sem convallis arcu, vitae ullamcorper felis metus a nunc. Morbi enim felis, bibendum sit amet lorem a, iaculis tristique tortor. Nunc orci ex, pellentesque non purus sit amet, feugiat malesuada nulla. Mauris vel purus sem. Proin commodo nibh justo, vel interdum erat dignissim interdum. Suspendisse at magna nec est rutrum pretium ac sed turpis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque commodo risus erat, et ultricies nisl commodo eu. Donec ut pharetra dui.</p>
<p>Donec feugiat lacus sapien, in cursus ex tristique eget. Sed sit amet ipsum leo. Cras aliquam ac nunc sed dapibus. In semper ullamcorper est, tempor ultrices elit fermentum ac. Suspendisse vel eros non mi porta dignissim. Morbi consectetur blandit enim ut finibus. Maecenas viverra lectus vel nisi dignissim, eget ultrices ante ultrices.</p>
<p>Cras eget justo aliquam, rhoncus mauris at, viverra enim. Nam sit amet quam nec mauris pellentesque dictum id a enim. Cras velit nisl, imperdiet a dolor quis, rhoncus tincidunt risus. Donec a orci augue. Suspendisse at augue at mauris bibendum euismod. Sed nec molestie tortor. Etiam nec volutpat dolor. Proin suscipit scelerisque lectus, a eleifend diam gravida eu. Phasellus viverra dolor magna.</p>
</div>
<div class="closedetails">CLOSE MORE DETAILS </div>
</div>
</div>
</div>
你会得到一个奇怪的效果,向上滑动然后在回调中再次滑动。不过给你...
jQuery(".closedetails").click(function () {
$closedetails = $(this);
$morecontent = $(this).parents(".hotel");
// Close more content when clicked
$morecontent.stop(true).slideUp(100,function () {
$("html, body").stop(true).animate({scrollTop: $morecontent.prev(".header").offset().top }, 300);
});