显示/隐藏菜单【知识点】if( $('#id').is(':visible') == false){}
效果描述:点击隐藏菜单按钮隐藏左侧导航栏同时按钮文字变为显示菜单,再点击显示左侧导航同时文字变为隐藏菜单;
效果图:
//显示隐藏左侧导航栏
$('#link_1').click(function() {
if( $('#leftmenu').is(':visible') == false){
$('#leftmenu').css('display','block');
$(this).children('a').text('隐藏菜单')
}else{
$('#leftmenu').css('display','none');
$(this).children('a').text('显示菜单')
}
})
给隐藏菜单的按钮添加click事件,改变leftmenu的样式,设置display值为none隐藏菜单;但是在点击时让其再显示,需要添加if判断条件if( $('#leftmenu').is(':visible') == false){},如果菜单栏不可以看到则让display变为block,同时改变文字;