Question

我在网上找到了这个代码，我需要帮助弄清楚当我点击其中一个菜单隐藏的li元素时如何制作。感谢。

var originalNavClasses;

function toggleNav() {
    var elem = document.getElementById('navigation_list');
    var classes = elem.className;
    if (originalNavClasses === undefined) {
        originalNavClasses = classes;
    }
    elem.className = /expanded/.test(classes)
        ? originalNavClasses
        : originalNavClasses + ' expanded';
}

<nav id="navigation">
    <a class="menu_button" href="#footer_nav" onclick="toggleNav(); return false;">
        &#9776;  MENU
    </a>
    <ul id="navigation_list" role="navigation">
        <li><a href=#>HOME</a>
        </li>
        <li><a href=#>SERVICES</a>
        </li>
        <li><a href=#>WORK</a>
        </li>
        <li><a href=#>CONTACT</a>
        </li>
    </ul>
</nav>

Answer 1

您的小提琴正在使用MooTools，不确定这是否是您正在使用的库，但这是您需要在jQuery中执行的操作。我不知道MooTools：

$(function() {
    $('#navigation_list a').on('click', function(e) {
        e.preventDefault();
        toggleNav();
    });
});

Answer 2

试试这个：

var nav = document.getElementById('navigation_list');

function toggleNav(e) {
    nav.classList.toggle('expanded');
    e.preventDefault();
}

document
    .getElementById('navigation')
    .getElementsByClassName('menu_button')[0]
    .onclick = toggleNav;

nav.onclick = toggleNav;

注意我已经删除了html中的内联事件侦听器，而是使用JS附加它。

Demo

如何使用javascript隐藏菜单

2 个答案: