javascript - 移动菜单下拉

Question

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

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

Answer 1

将事件监听器添加到菜单内的 anchor 元素，单击该元素会触发一个函数，该函数会重现按下汉堡菜单图标时的 Action ，因此它会从中删除事件类

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

所以试着在你的 ui.js 文件中，在你的 main 函数中添加:

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 .