为带有子菜单的移动菜单添加关闭功能

Question

我正在为我在 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";
}

Answer 1

将您的代码更改为：

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

请注意以下几点：

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