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

Question

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

在 jQuery 中，我会添加这样一行 $('.menu-toggle').toggleClass('menu-open');

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

代码笔:http://cdpn.io/roCqH

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>

CSS

.menu-toggle {
    display: block;
    position: absolute;
    right: 45px;
    top: 20px;
    width: 25px;
    height: 25px;
    z-index: 999;
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    text-shadow: 2px 2px #fff;
}
.menu-open {
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    font-size: 30px;
    line-height: 1;
    font-weight: 800;
    text-shadow: 2px 2px SpringGreen;
}
.menu-toggle, .main-navigation.toggled .nav-menu {
    display: block;
}

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'); */

Answer 1

不要分配给 button.onclick，正如您所发现的，它一次只能分配一个处理程序，而是使用 DOM2 处理程序:

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

您可以拥有任意多个。它们与 button.onclick = 类型并存，因此您可以同时拥有该类型和 DOM2 处理程序。

如果您需要支持 IE8，则必须使用 Microsoft 的 DOM2 前身(是的，没错，他们先到了——然后花了十年时间没有​​更新以支持该标准):

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...
}

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