Bootstrap 4 Accordian滚动打开内容? [英] Bootstrap 4 Accordian scroll to open content?
本文介绍了Bootstrap 4 Accordian滚动打开内容?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我知道有人问过这个问题，并且我正在与提出类似问题的人一起使用示例代码(
I understand this question has been asked and I'm working with sample code of someone who asked a similar question (Bootstrap accordion, scroll to top of active (open) accordion on click?), but am unable to get it to work in my code.
移动用户单击按钮查看更多内容时，内容将在屏幕下方打开.用户不会知道它在那里.
When a mobile user clicks on a button to view more, the content opens up below the screen. The user would have no idea it's there.
当用户单击按钮查看内容时，我希望内容自动滚动到.
When a user clicks the button to view the content, I would like the content to be scrolled to automatically.
这是我的代码: https://jsfiddle.net/bigtime/6yung8vk/2/
JQUERY:
$('.panel-collapse').on('shown.bs.collapse', function(e) {
var $panel = $(this).closest('.panel');
$('html,body').animate({
scrollTop: $panel.offset().top
}, 500);
});
HTML:
<!-- Yellow Section -->
<div class="accordion" id="expandInfo">
<section id="yello" class="py-5">
<div class="container">
<div class="row ">
<!--start featured video -->
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
<span class="fa-stack fa-2x" style="font-size: 45px;">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-file-video fa-stack-1x aria-hidden="true""></i>
</span>
<h3 class="iconyell">Featured Video</h3>
<p>Women's Self-Defense</p>
<button type="button" class="btn" data-toggle="collapse" data-target="#viewVideo">SEE VIDEO</button>
</div>
<!--end featured video -->
<!-- start train -->
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
<span class="fa-stack fa-2x" style="font-size: 45px;">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa far fa-handshake fa-stack-1x aria-hidden="true""></i>
</span>
<h3 class="iconyell">Train With Us</h3>
<p>Why You Should</p>
<button type="button" class="btn" data-toggle="collapse" data-target="#whyUs">WHY US?</button>
</div>
<!--end train-->
<!--start instruct -->
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center yellopos">
<span class="fa-stack fa-2x" style="font-size: 45px;">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fas fa-users fa-stack-1x aria-hidden="true""></i>
</span>
<h3 class="iconyell">Your Instructor</h3>
<p>Get To Know Us</p>
<button type="button" class="btn" data-toggle="collapse" data-target="#yourInstructor">MEET US</button>
</div>
<!--end instruct-->
</div>
</div>
</section>
<!-- Collapsible Element HTML -->
<!--start viewVideo area -->
<div id="viewVideo" class="collapse row mt-3 panel-collapse" data-parent="#expandInfo">
<!--start single news item -->
<div class="col-md-7">
<div class="embed-responsive embed-responsive-4by3" style="width: 70%; margin: auto;">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/WVm3D9kqows"></iframe>
</div>
</div>
<div class="col-md-5">
<h4>Women's Self-Defense Course</h4>
<p>This is a video of a Women's Self-Defense Class given at Sam Houston State University. While watching a video isn't as good as attending a course, there is still a lot that can be learned from watching this online course. If you practice the skills
presented in the video you can improve your chances of surviving an attack.</p>
<p>Click the play button to see a short clip of the class.</p>
<div style="text-align:center">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="9NMATMUT2634Q" />
<input class="btn btn-outline-primary btn-lg" type="submit" value="Buy Now - $20">
</form>
</div>
</div>
</div>
<!--end viewVideo area -->
<!--start whyUs area -->
<div id="whyUs" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
<!--start single news item -->
<div class="col-md-5">
<div class="embed-responsive">
<img src="image/why-join-mousels-mixed-martial-arts.JPG" width="442" height="370" alt="Why join Mousel's Mixed Martial Arts Academy" class="img-fluid img-thumbnail rounded mx-auto d-block">
</div>
</div>
<div class="col-md-7">
<h4>Why you sould choose us...</h4>
<p>Sharing knowledge and helping others reach their full potential is what we do best.
</p>
<p>
The martial arts were originally aimed towards life preservation and self defense, but today people come to us from all walks of life, each with their own set of reasons for wanting to train at Mousel’s Mixed Martial Arts Academy. Some want to learn self
defense, others want to fight competitively, some seek to become physically fit and others just want to have fun. Whatever the reason you chose, you will find others just like yourself studying at Mousel’s Mixed Martial Arts Academy.
</p>
</div>
</div>
<!--end viewVideo area -->
<!--start yourInstructor area -->
<div id="yourInstructor" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
<!--start single news item -->
<div class="col-md-4">
<div class="embed-responsive">
<img src="../images/tim-mousel-profile.jpg" width="250" height="376" class="img-fluid img-thumbnail rounded mx-auto d-block">
</div>
</div>
<div class="col-md-8">
<h4>Tim Mousel</h4>
<p>Tim Mousel is the owner of <a href="http://www.defend.net/">Mousel's Mixed Martial Arts Academy</a>, <a href="https://www.womens-self-defense.org/">Women's Self-Defense</a>, and <a href="https://www.edge-trainer.com/">The Edge Personal Training</a>.</p>
<p>Tim has trained many of Houston's top martial arts instructors and has students he has trained compete at the highest levels of mixed martial arts competition including the <strong>Ultimate Fighting Championship</strong> (UFC), <strong>King of the Cage</strong>,
<strong>Pride</strong>, national kickboxing and Thai boxing championships, amateur and professional boxing. Tim was also the Strength and Conditioning Coach for two-time world boxing champion <a href="http://www.reggiesweetjohnson.com/"
target="_blank">Reggie Johnson</a>.
</p>
</div>
</div>
<!--end yourInstructor area -->
</div>
<!-- end expandInfo -->
任何帮助将不胜感激！
谢谢
蒂姆
推荐答案
请查看下面的代码段
$('.panel-collapse').on('shown.bs.collapse', function(e) {
var $panel = $(this).attr("id")
console.log($panel)
$('html, body').animate({
scrollTop: $('#' + $panel).offset().top
}, 500);
});
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="accordion container-fluid" id="expandInfo">
<section id="yello" class="py-5">
<div class="container">
<div class="row ">
<!--start featured video -->
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
<span class="fa-stack fa-2x" style="font-size: 45px;">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fa-file-video fa-stack-1x aria-hidden=" true></i>
</span>
<h3 class="iconyell">Featured Video</h3>
<p>Women's Self-Defense</p>
<button type="button" class="btn" data-toggle="collapse" data-target="#viewVideo">SEE VIDEO</button>
</div>
<!--end featured video -->
<!-- start train -->
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center">
<span class="fa-stack fa-2x" style="font-size: 45px;">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa far fa-handshake fa-stack-1x aria-hidden=" true""></i>
</span>
<h3 class="iconyell">Train With Us</h3>
<p>Why You Should</p>
<button type="button" class="btn" data-toggle="collapse" data-target="#whyUs">WHY US?</button>
</div>
<!--end train-->
<!--start instruct -->
<div class="col-sm-12 col-md-12 col-lg-4 col-xl-4 text-center yellopos">
<span class="fa-stack fa-2x" style="font-size: 45px;">
<i class="fa fa-circle fa-stack-2x icon-background"></i>
<i class="fa fas fa-users fa-stack-1x aria-hidden=" true""></i>
</span>
<h3 class="iconyell">Your Instructor</h3>
<p>Get To Know Us</p>
<button type="button" class="btn" data-toggle="collapse" data-target="#yourInstructor">MEET US</button>
</div>
<!--end instruct-->
</div>
</div>
</section>
<!-- Collapsible Element HTML -->
<!--start viewVideo area -->
<div id="viewVideo" class="collapse row mt-3 panel-collapse" data-parent="#expandInfo">
<!--start single news item -->
<div class="col-md-7">
<div class="embed-responsive embed-responsive-4by3" style="width: 70%; margin: auto;">
<iframe class="embed-responsive-item" src="//www.youtube.com/embed/WVm3D9kqows"></iframe>
</div>
</div>
<div class="col-md-5">
<h4>Women's Self-Defense Course</h4>
<p>This is a video of a Women's Self-Defense Class given at Sam Houston State University. While watching a video isn't as good as attending a course, there is still a lot that can be learned from watching this online course. If you practice the skills
presented in the video you can improve your chances of surviving an attack.</p>
<p>Click the play button to see a short clip of the class.</p>
<div style="text-align:center">
<form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_top">
<input type="hidden" name="cmd" value="_s-xclick" />
<input type="hidden" name="hosted_button_id" value="9NMATMUT2634Q" />
<input class="btn btn-outline-primary btn-lg" type="submit" value="Buy Now - $20">
</form>
</div>
</div>
</div>
<!--end viewVideo area -->
<!--start whyUs area -->
<div id="whyUs" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
<!--start single news item -->
<div class="col-md-5">
<div class="embed-responsive">
<img src="image/why-join-mousels-mixed-martial-arts.JPG" width="442" height="370" alt="Why join Mousel's Mixed Martial Arts Academy" class="img-fluid img-thumbnail rounded mx-auto d-block">
</div>
</div>
<div class="col-md-7">
<h4>Why you sould choose us...</h4>
<p>Sharing knowledge and helping others reach their full potential is what we do best.
</p>
<p>
The martial arts were originally aimed towards life preservation and self defense, but today people come to us from all walks of life, each with their own set of reasons for wanting to train at Mousel’s Mixed Martial Arts Academy. Some want to learn self
defense, others want to fight competitively, some seek to become physically fit and others just want to have fun. Whatever the reason you chose, you will find others just like yourself studying at Mousel’s Mixed Martial Arts Academy.
</p>
</div>
</div>
<!--end viewVideo area -->
<!--start yourInstructor area -->
<div id="yourInstructor" class="collapse row justify-content-center mt-3 panel-collapse" data-parent="#expandInfo">
<!--start single news item -->
<div class="col-md-4">
<div class="embed-responsive">
<img src="../images/tim-mousel-profile.jpg" width="250" height="376" class="img-fluid img-thumbnail rounded mx-auto d-block">
</div>
</div>
<div class="col-md-8">
<h4>Tim Mousel</h4>
<p>Tim Mousel is the owner of <a href="http://www.defend.net/">Mousel's Mixed Martial Arts
Academy</a>, <a href="https://www.womens-self-defense.org/">Women's Self-Defense</a>, and <a href="https://www.edge-trainer.com/">The Edge Personal Training</a>.</p>
<p>Tim has trained many of Houston's top martial arts instructors and has students he has trained compete at the highest levels of mixed martial arts competition including the <strong>Ultimate Fighting Championship</strong> (UFC), <strong>King of the Cage</strong>,
<strong>Pride</strong>, national kickboxing and Thai boxing championships, amateur and professional boxing. Tim was also the Strength and Conditioning Coach for two-time world boxing champion <a href="http://www.reggiesweetjohnson.com/"
target="_blank">Reggie Johnson</a>.
</p>
</div>
</div>
<!--end yourInstructor area -->
</div>
<!-- end expandInfo -->
</body>
</html>
这篇关于Bootstrap 4 Accordian滚动打开内容?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
