1. 程式人生 > >顯示/隱藏選單【知識點】if( $('#id').is(':visible') == false){}

顯示/隱藏選單【知識點】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,同時改變文字;