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

Posted 2023-03-06

【中文标题】为带有子菜单的移动菜单添加关闭功能

【英文标题】：Adding Close functionality for mobile menu with submenu

【发布时间】：2021-03-24 22:19:14

【问题描述】：

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

【参考方案1】：

将您的代码更改为：

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

请注意以下几点：

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

【讨论】：

嘿，谢谢您的评论！这只是为了让导航消失，当点击 对吗？您是否也有解决主要问题的方法？谢谢=)

@johnthreesixteenamen 是的，它应该在单击元素时消失。

非常感谢！你知道如何解决我的主要问题吗？那，当我第二次单击下拉触发器“终止”时，它会使下拉子菜单消失吗？谢谢

@johnthreesixteenamen 我创造了这个小提琴。 jsfiddle.net/anpel13/2cqku3h7。在 chrome mobile 中，它不会在随后的点击中消失。再说一次，当您的基本意思是 expanded 时，使用 :hover 并不是一个理想的解决方案，并且最终可能会产生意想不到的结果。