jQuery的腳本我們在剛剛開起的main.js中開發，
起手式

$(".toggler").click();

$()是jQuery選擇函數兩個小括號中間放的是我們要選的選擇器，.click()是指點擊事件，點擊之後要做什麼就寫在裡面。
這一次，我們希望點擊之後，list做切換，出現跟消失，
HTML

 $(".list").toggleClass("active");

toggleClass是jQuery的一個切換功能，點擊後將.list的CSS 屬性，新增active class屬性
CSS中我們新增:

.list.active {
        left: 0;
    }

這一行使得擁有.list及.active class屬性的元素 left定位在0。

進階範例:將選單按鈕切換成
在CSS中，我們首先將選單按鈕旋轉

    .line.active {
        transform: rotate(45deg);
    }

接著我們後來畫出來的.line:after 及.line:before分別重疊跟旋轉

    .line.active:after {
        top: 0px;
    }
    .line.active:before {
        transform: rotate(270deg);
        bottom: 0px;
    }

這樣就完成CSS的部分，再來調整jQuery:
在原本的範例中，新增:

$(".line").toggleClass("active");

點擊切換後新增active跟取消active屬性。

小提醒:
1.jQuery=$ 如果出現$ not define 則有可能未引用或引用錯誤
2.錯誤可以在之前介紹的檢查工具中，選擇console看到錯誤訊息
3.addClass 的C是大寫
4.小駝峰式命名法，第一個單字寫小寫，其他單字首字大寫。