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

Question

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

在jQuery中，我将添加类似于$('.menu-toggle').toggleClass('menu-open');

任何建议将不胜感激。

CodePen： 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 = kind 旁边 ，因此您可以同时拥有该种类和DOM2处理程序。

如果需要支持IE8，则必须使用Microsoft的DOM2的前身（是的，没错，他们首先到达了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之类的库来为我们处理这些差异的原因。 :-)