Question

我有一个包含多个区域的图像映射，每个区域都有一个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>...

Answer 1

如果有人和我在同一条船上，我设法用以下代码做我想做的事：

        $(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();
                }  
            });
        });

我已经将scrollIntoView替换为animate（{scrollTop}），稍稍调整一下，我的行为甚至比我的目标更好（页面smoothscrolls进入div点击而不是跳跃它进入视图）。另外，我学习了一些关于jQuery选择器的东西（必须选择div：隐藏在这种情况下，因此它可以工作，而不是寻找区域[href =＆＃34;＃＆＃34;]）。

Answer 2

你可以试试这个，在这个例子中。 link_是以a开头的所有link_代码。因此，您可以将其用作id get和href并滚动。

因此，ids可以是link_#A00Info或link_#A00Details。它适用于ids

或更好地提供 HTML 代码。

      $('[id^="link_"]').on('shown.bs.collapse', function(event) {
        var dataValue = $(this).attr('href');
        $(dataValue).scrollIntoView();
      });

适用于所有区域的Bootstrap数据切换和scrollIntoView

2 个答案: