24% jQuery – 收合式側邊選單

 $(function(){
var duration = 300;
var $aside = $(‘.page-main > aside’);
var $asidButton = $aside.find(‘button’)
.on(‘click’, function(){
$aside.toggleClass(‘open’);
if($aside.hasClass(‘open’)){
$aside.stop(true).animate({left: ‘-70px’
}, duration, ‘easeOutBack’);
$asidButton.find(‘img’).attr(‘src’, ‘imgn_close.png’
);
}else{
$aside.stop(true).animate({left: ‘-350px’
}, duration, ‘easeInBack’);
$asidButton.find(‘img’).attr(‘src’, ‘imgn_open.png’);
};
});
});

點擊 button所執行的 function中會對變數 $aside執行 toggleClass方法，toggleClass方法是「檢查jQ物件中的元素的class屬性是否有參數所指定的類別名稱(字串)，沒有就加入，有就刪除」。

if中使用 hasClass()方法做為條件，hasClass()方法是「檢查目標元素的Class屬性中是否有包含傳入的類別名稱(字串)，有包含傳入true，否則傳回false」