jQuery辨識選單按鈕開關狀態

20161103-001  20161103-002

製作RWD網頁時,右上角的漢堡(hamburger)按鈕通常是按一下開啟選單,再按一下關閉選單,這個功能可以利用jQuery來製作就可以了。

先在html利用<div>建立一個按鈕

CSS部份主要是把按鈕實體化

js利用.hasClass();函式來辨識按鈕的狀態

先自訂一個要用來判斷的條件,這裡用的條件是:

判斷按鈕有沒有套用navOpen類別(class)

判斷成立:(選單為開啟狀態)關閉選單,按鈕移除navOpen類別(class)

判斷失敗:(選單為關閉狀態)開啟選單,按鈕套用navOpen類別(class)

 

接下來實際用if判斷式來進行:

if(按鈕.hasClass(‘navOpen’)){

關閉nav(範例用animate();動態函式)

按鈕.removeClass();

}else{

開啟nav

按鈕.addClass(‘navOpen’);

}

範例這裡下載

Leave a Reply