我有一个包含多个区域的图像地图,每个区域都有一个href ID。单击图像上的某个区域可将图像下方的div折叠起来,然后再次单击同一区域将闭合的div闭合。
我试图让div在单击时滚动到scrollIntoView,我设法做到了
$('#A00Info').on('shown.bs.collapse', function () {
document.getElementById('A00Info').scrollIntoView({block: "end", behavior: "smooth"});
现在,这在一定程度上可行。当我单击#A00Info区域时,它将div折叠到图像下方,并将其滚动到视图中。
我的问题是我有4个具有许多区域的图像映射,并且我不想为每个div复制和粘贴脚本。
如何编写一个函数/脚本来查找被单击的区域,然后查找对应的div,将其折叠并滚动到视图中?
我做了两次尝试,
$('area[href*="#"]:not([href="#"]').on('shown.bs.collapse', function () {
var target = $(this.getAttribute('href'));
target.scrollIntoView();
});
和
$('area[href*="#"]:not([href="#"]').on('shown.bs.collapse', function () {
document.getElementById('href').scrollIntoView();
});
但我没有成功。我是jQuery和JavaScript的新手,还是新手程序员。对于任何帮助或指导,我将非常有帮助。
编辑:这是我的HTML
具有地图及其区域的窗格
...<div id="groundfloor" class="tab-pane fade">
<div class="text-center">
<img src="FloorPlanGround.png" alt="" usemap="#groundfloormap">
<map name="groundfloormap" id="groundfloormap">
<area data-toggle="collapse" alt="" title="" href="#A00Info" shape="rect" coords="220,203,344,322" />
<area data-toggle="collapse" alt="" title="" href="#A07Info" shape="rect" coords="288,129,343,152" />...
和单击区域后打开的div
...<div class="container-fluid">
<div id="A00Info" class="text-center hidden">
<div class="panel-collapse collapse in">
<div class="row1 col-lg-12 text-left" style="padding-left: 0px;">
<h2 style="text-decoration: underline; margin-bottom: 1px;">A00</h2>...
最佳答案
如果有人和我在同一条船上,那么我可以使用以下代码来完成我想做的事情:
$(document).ready(function(){
$("div:hidden").on({
'shown.bs.collapse': function(){
$('html, body').animate({
scrollTop: $(this).offset().top - 20
}, 'slow');
event.stopImmediatePropagation();
},
'hidden.bs.collapse': function(){
$("html, body").animate({ scrollTop: 0 }, "slow");
event.stopImmediatePropagation();
}
});
});
我已经用animate({scrollTop})替换了scrollIntoView,对其进行了一些微调,并且得到的行为甚至比我想要的要好(页面平滑滚动到div上,该div在单击时打开,而不仅仅是跳入视图)。另外,我了解了一些有关jQuery选择器的信息(在这种情况下,必须选择div:hidden,这样它才可以工作,而不是寻找area [href =“#”])。
关于jquery - 引导所有区域的数据切换和scrollIntoView,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/38945906/