0

我已经构建了一个 Asp.net MVC 视图,其中有来自 Azure 地图的地图。我还有一个侧边栏,我可以将它折叠起来变小。

折叠栏的代码如下(并且包含在 _layout 文件中):

 function collapse2() {
        $('#sidebar').toggleClass('active');
    $('#content').toggleClass('active');

}
window.onload = function () {

    $("#sidebarCollapse").on('click', collapse2);
 }

在视图中,我添加了以下 javascript。

  function resize() {
                    map.map.resize();
                }
     $(document).ready(function () {



    GetMap();
    $(document).click('#resizea', resize);
     $(document).click('#sidebarCollapse', resize);
 });

当我按下 ID 为sidebarCollapse时,侧边栏会折叠,但地图不会调整大小(它不会拉伸 100%)。但是,如果我在折叠后单击带有 id resizea的链接标签,则地图的大小会调整为正确的大小。

谁能带领我朝着正确的方向前进?

提前感谢!

4

1 回答 1

0

正如我在评论中提到的,我怀疑 div 尚未调整大小。当 DOM 元素调整大小而不是窗口时,HTML 不提供任何事件。要知道某些东西是否调整大小,您必须对其进行监控,这对您自己来说是一件痛苦的事情。由于您使用的是 jquery,您可以使用调整大小功能:https ://api.jquery.com/resize/它适用于 div。

如果这不起作用。听起来问题出在您按下侧边栏折叠按钮时。我假设这个按钮也会折叠侧边栏,可能有一个单独的点击事件。尝试将它们组合在一起,并在调用折叠侧边栏的代码后调用 resize 函数。如果你有一个关于折叠的动画,这可能不起作用,在这种情况下,用 setTimeout 包裹 resize 函数并使用比动画稍长的时间跨度。

于 2019-04-03T16:30:51.670 回答