下拉菜单隐藏与显示

最新推荐文章于 2021-06-04 10:07:31 发布

原创最新推荐文章于 2021-06-04 10:07:31 发布 · 866 阅读

CC 4.0 BY-SA版权

本文通过一个具体的实例展示了如何使用jQuery进行DOM元素的选择与操作，包括样式修改、事件绑定及元素显示与隐藏的控制。

<script type="text/javascript">
			$(function(){
				$('p:first span').css('color','red');
				$('p:first + p').css('color','green');
				$('a:last').css('color','red');
				$('.sz').css('background-color','pink');
				$('.open').click(function(){
					
					if($('.in:hidden').length >0){
						 $('.in').removeClass('hidden');
					}else{
						$('.in').addClass('hidden');
					}
				})
			})
			
		</script>
	</head>
	<body>
		
			<p>淘乐，发现更多生活，<span>快乐</span>就在你身边...</p>
			<p>近期热门......<a class="open">更多</a></p>
			<div class="on">
			<p>言语之庭</p>
			<p>斯托克</p>
			<p class="sz">宿醉</p>
			<p>巨人捕手杰克</p>
			<p>副作用</p>
			<div class="in hidden">
			<p>血肉之躯</p>
			<p>7号房的礼物</p>
			<p>尖叫声</p>
			</div>
			<a>更多排名</a>
			
		</div>
	</body>

if($('.in:hidden').length >0){
                       $('.in').removeClass('hidden');
                   }else{
                       $('.in').addClass('hidden');
                   }

:hidden先提出被隐藏的

<div class="in hidden">
           <p>血肉之躯</p>
           <p>7号房的礼物</p>
           <p>尖叫声</p>
           </div>

此盒子的内容，

如果盒子里面的值的长度=0，把隐藏删除，让它显示。

如果盒子里面的值的长度！=0，把隐藏添加，让它隐藏。