向菜单切换添加第二个JavaScript函数

我想在我的菜单切换中添加第二个JavaScript函数。我想在同一个函数中切换菜单列表并更改切换按钮的类名

在jQuery中，我会添加一行类似这样的代码：

$（'.menu-toggle'）.toggleClass（'menu-open'）

如有任何建议，将不胜感激

代码笔：

HTML

<nav id="site-navigation" class="main-navigation toggled" role="navigation">
    <h1 class="menu-toggle">+</h1>

    <div class="menu">
        <ul class=" nav-menu">
            <li><a>Home</a>
            </li>
            <li><a>Contact</a>
            </li>
            <li><a>Sample Page</a>
            </li>
            <li><a>The Emperor’s New Clothes</a>
            </li>
        </ul>
    </div>
</nav>

JavaScript

/**
 * navigation.js
 *
 * Handles toggling the navigation menu for small screens.
 */
( function() {
    var container, button, menu, menuToggle;

    container = document.getElementById( 'site-navigation' );
    if ( ! container )
        return;

    button = container.getElementsByTagName( 'h1' )[0];
    if ( 'undefined' === typeof button )
        return;

    menu = container.getElementsByTagName( 'ul' )[0];

    menuToggle = container.getElementsByClassName( 'menu-toggle' )[0];

    // Hide menu toggle button if menu is empty and return early.
    if ( 'undefined' === typeof menu ) {
        button.style.display = 'none';
        return;
    }

    if ( -1 === menu.className.indexOf( 'nav-menu' ) )
        menu.className += ' nav-menu';

    button.onclick = function() {

        if ( -1 !== container.className.indexOf( 'toggled' ) )
            container.className = container.className.replace( 'toggled', '' );
        else
            container.className += 'toggled'; 
}

} )();


/* $(this).toggleClass('menu-open'); */

使用DOM2处理程序，而不是分配给
按钮。onclick
，因为您发现它一次只能分配一个处理程序：

button.addEventListener("click", function() {
    // Code here
}, false);

你想要多少就有多少。它们与
button.onclick=
kind共存，因此您可以同时拥有该类和DOM2处理程序

如果您需要支持IE8，您必须使用微软DOM2的前身（是的，没错，他们先到了那里，然后花了十年时间不更新以支持该标准）：

因此，对于不需要访问事件的简单处理程序，可以执行以下操作：

if (button.addEventListener) {
    button.addEventListener("click", handleTheEvent, false);
}
else if (button.attachEvent) {
    button.attachEvent("onclick", handleTheEvent);
}

function handleTheEvent() {
    // ...code here...
}

如果它需要做更复杂的事情，比如阻止按钮的默认操作、停止传播等，那么这就是为什么我们有像jQuery这样的lib来处理这些差异。：-）

button.attachEvent("onclick", function() {
    // Code here
});

if (button.addEventListener) {
    button.addEventListener("click", handleTheEvent, false);
}
else if (button.attachEvent) {
    button.attachEvent("onclick", handleTheEvent);
}

function handleTheEvent() {
    // ...code here...
}