最新消息:XAMPP默认安装之后是很不安全的,我们只需要点击左方菜单的 "安全"选项,按照向导操作即可完成安全设置。

24% jQuery – 收合式側邊選單

XAMPP下载 admin 770浏览 0评论

今天做4-4喔~建議買書練習喔~

點擊後開啟與收合左側欄位

QQ截图20180920153639

QQ截图20180920153647

 $(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」

 

 

转载请注明:XAMPP中文组官网 » 24% jQuery – 收合式側邊選單

您必须 登录 才能发表评论!