0

我正在为我在 Wordpress + Divi 主题中构建的网站开发移动菜单。当网站用户点击“汉堡图标”时，它会打开一个全屏菜单：

移动菜单

当您点击“终止”时，它会打开一个子菜单：

带有子菜单的移动菜单

第二次点击“终止”时，我希望子菜单再次消失。但我很遗憾不知道怎么做。

这是我使用的代码：

<li class="nav-link">
    <a href="#">Termine<i class="fas fa-caret-fown"></i></a>
        <div class="dropdown">
            <ul>
                <li class="dropdown_link">
                    <a href="#" onclick="closeNav()">Regelmäßige Termine</a>
                </li>
                <li class="dropdown_link">
                    <a href="#" onclick="closeNav()">Besondere Termine</a>
                </li>
                <li class="dropdown_link">
                    <a href="#" onclick="closeNav()">Freizeiten</a>
                </li>
            </ul>
        </div>
</li>

打开子菜单的 CSS 如下所示：

.nav-link:hover > .dropdown {
    display: block;
 }

“closeNav()”的 Java 脚本函数是：

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
}
4

1 回答 1

0

将您的代码更改为：

function closeNav() {
    document.getElementById("mySidenav").style.display = "none";
}

请注意以下事项：

  • 如果<a>元素是常规的 HTML 链接（不是由某些 javascript 路由器生成的），当用户单击它们时，它们只会导航到不同的页面，因此菜单会以任何一种方式关闭。
  • 您的页面看起来像是为移动使用而设计的。在大多数移动设备中，hover这将不起作用，因为点击链接实际上是一次点击。
于 2020-12-14T09:17:22.407 回答