时间戳

首页 > 解决方案 > 使用 JS 在加载时切换按钮

javascript - 使用 JS 在加载时切换按钮

问题描述

我有一个问题，我有一个菜单，当您转到页面或刷新它时会弹出，我希望它被隐藏，直到用户单击其指定的切换按钮。我能想到的最简单的解决方法是编写一个命令，该命令基本上在页面加载时自动点击切换按钮，但我不知道该怎么做。

这是我的代码：容器myNav包含一堆fullscreen弹出菜单的代码。我没有包括它，因为它只是一堆会占用空间的链接。

<div id="myNav" class="overlay">
</div>

<button id="header-mobile-menu-button" onclick="toggleMobileMenu()">
                <svg class="header-mobile-menu-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1697.56 428.94"><defs><style>.cls-1,.cls-2{fill:var(--font-color);}.cls-1{stroke:none;stroke-miterlimit:10;}</style></defs><circle class="cls-1" cx="214.47" cy="214.47" r="213.97"/><circle class="cls-1" cx="849.03" cy="214.47" r="213.97"/><circle class="cls-2" cx="1483.59" cy="214.47" r="213.97"/>
                </svg>
                <script>
    function toggleMobileMenu() {
  var x = document.getElementById("myNav");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

我希望做类似的事情：onload = function toggleMobileMenu，但我无法弄清楚语法。

标签： javascripthtml

解决方案

您只需要添加display:none到nav您的功能集中display:block

        function toggleMobileMenu() {
            var x = document.getElementById("myNav");
            if (x.style.display === "none") {
                x.style.display = "block";
            } else {
                x.style.display = "none";
            }
        }
    <div id="myNav" style="display:none;" class="overlay">
        this is my nav
    </div>

    <button id="header-mobile-menu-button" onclick="toggleMobileMenu()">
        <svg class="header-mobile-menu-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1697.56 428.94">
            <circle class="cls-1" cx="214.47" cy="214.47" r="213.97" />
            <circle class="cls-1" cx="849.03" cy="214.47" r="213.97" />
            <circle class="cls-2" cx="1483.59" cy="214.47" r="213.97" />
        </svg>
        click to show nav
    </button>

推荐阅读