Question

我正在使用PureCss示例中的响应式菜单脚本。我希望用户点击链接后菜单消失。点击完成后如何自动隐藏菜单？我尝试使用hide()或.fadeOut()，但它不起作用

https://jsfiddle.net/bpvm8b5L/3/

Answer 1

向菜单中的锚元素添加一个事件监听器，点击后触发一个功能，该功能可以重现按下汉堡包菜单图标时的操作，因此它会删除活动的类

<div id="layout" class=" active">
<a href="#menu" id="menuLink" class="menu-link active">…</a>
<div id="menu" class='active'>…</div>

因此，请尝试在主函数中添加ui.js文件：

var ulElem = document.getElementById('ulElem');

ulElem.onclick = function (e) {
     e.preventDefault();
     console.log(e.target.classList.value);
     if(e.target.classList.value === "pure-menu-link") {
     toggleClass(layout, active);
     toggleClass(menu, active);
     toggleClass(menuLink, active);
     }
}

请记住将HTML文件中的ui元素的ID名称设置为id=uiElem。

Answer 2

你也可以试试这个

在html中，假设你有类似的东西：

<nav id="toggleMenu">
   //all your links
</nav>

在jquery中，

 $('#toggleMenu li      a').click(function(){
    $('#toggleMenu).hide(200);
});

移动菜单下拉菜单

2 个答案: