显示/隐藏菜单【知识点】if( $('#id').is(':visible') == false){}

原创于 2018-11-01 16:30:30 发布 · 1.4k 阅读

1 ·

CC 4.0 BY-SA版权

本文介绍了一种使用jQuery实现的菜单显示与隐藏效果。通过点击按钮，可以切换左侧导航栏的显示状态，并同步更新按钮上的文字提示。该功能通过添加click事件监听器并检查菜单的可见性来实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果描述：点击隐藏菜单按钮隐藏左侧导航栏同时按钮文字变为显示菜单，再点击显示左侧导航同时文字变为隐藏菜单；

效果图：

//显示隐藏左侧导航栏
		$('#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，同时改变文字；