我有一个包含多个区域的图像地图,每个区域都有一个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/

10-14 13:58
查看更多