Question

我想在菜单切换中添加第二个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>

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，你必须使用微软的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这样的库来为我们处理这些差异。： - ）

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

1 个答案: