添加第二個JavaScript函數菜單切換

我想添加第二個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>

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

來源

2014-04-07 justinav

而是分配給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... 
}

：

所以一個簡單的處理程序，並不需要的情況下訪問，你可以這樣做呃，那是wh Ÿ我們有像jQuery這樣的庫，來爲我們處理這些差異。 :-)

來源

2014-04-07 14:01:24

添加第二個JavaScript函數菜單切換

回答

相關問題