Javascript 在加载时显示 div

Question

我有一些自定义按钮覆盖在 Google map 上。当您单击其中一个按钮时，它会将 map div 向右滑动 360px，并在 map 腾空的位置向左滑动 360px 宽的 div。当我单击 map 上的按钮时，它按设计工作并像它应该的那样滑动 map 和 div，当您单击 div 上的关闭按钮时，它会滑出焦点并且 map 返回到它之前的位置。

我的问题是我试图让这个滑入的 div 在加载时显示。我尝试过的解决方案不太奏效，而且我对 Javascript 也不是很好。如果我使用 CSS z-index 1，它将在页面加载时加载，但它显示在 map 顶部，而不是 map 滑动超过 350 像素。所以 CSS 解决方案在这种情况下不起作用，因为 div 覆盖在 map 上而不是将其滑过并覆盖左上角有 Logo 的 map 。

这就是我打开和关闭 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";
}

那么，我如何才能在页面加载时默认显示此内容，但像单击按钮时那样滑动 map 呢？也有办法让 .style.marginLeft 的宽度自动设置，这样它就会根据滑入的 div 的大小滑过，因为有时内容是动态的，但如果我设置了一个硬设置边距，那么当 div 没有填满整个宽度时，会有额外的空间。说明为什么“alert-list”设置了 minWidth。

-谢谢!

Answer 1

我可以通过将以下内容添加到我的 Javascript 的顶部来轻松解决这个问题。

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