Question

我在Google地图上叠加了一些自定义按钮。当您单击其中一个按钮时，它会将地图div滑动360px并在地图腾出的位置左侧滑动360px宽的div。当我单击地图上的按钮时，它按设计工作并将地图滑过并按照应该的方式进行划分，当您单击div上的关闭按钮时，它会滑出焦点，地图将返回到之前的位置。

我的问题是我想让这个div滑入显示加载。我尝试过的解决方案并不是很有效，而且我对Javascript也不是很好。如果我使用CSS z-index 1，它将在页面加载时加载，但它会在地图顶部显示，而不是在350px上滑动的地图。因此，在这种情况下，CSS解决方案无法工作，因为地图上的div覆盖而不是将其滑过并覆盖左上角有徽标的地图。

这是我打开和关闭div的方式。

HTML

<button id="alertBtn" class="map__control_icon" onclick="openAlerts();"><i class="fa fa-exclamation-triangle"></i></button>

的Javascript

function openAlerts() {
    document.getElementById("alert-list").style.minWidth = "360px";
    document.getElementById("map-wrapper").style.marginLeft = "360px";
    document.getElementById("mapButtons").style.marginLeft = "-360px";
}

function closeAlerts() {
    document.getElementById("alert-list").style.width = "0";
    document.getElementById("map-wrapper").style.marginLeft= "0";
    document.getElementById("mapButtons").style.marginLeft = "0";
}

那么如何在页面加载时默认显示此节目，但是像点击按钮时一样滑动地图？也有一些方法可以将宽度 .style.marginLeft 设置为自动，以便根据滑入的div的大小滑过，因为有时内容是动态的，但如果我设置了硬设置边距，那么当div没有填满整个宽度时，有额外的空间。 Hench为什么＆＃34;警告列表＆＃34;设置为minWidth。

-Thanks！

Answer 1

通过在我的Javascript顶部添加以下内容，我能够轻松解决此问题。

$(document).ready(openAlerts());

Answer 2

如果您想要纯JavaScript，请使用此

document.addEventListener('DOMContentLoaded', openAlerts, false);

Javascript在加载时显示div

2 个答案: