jquery实现div的隐藏和显示

编程知识 行业动态 更新时间:2024-06-13 00:21:04

jquery实现div的隐藏和显示

$('#wsView')是要点击的按钮,$('#secondMenu')是要显示或隐藏的内容区域
 <div style="float:left;margin-left:5px">
	<a id="wsView" class="button button-primary" ></i>查看</a>
	<ul id="secondMenu" class="secondMenu" >
		<li></li>
		<li></li>
		<li></li>
	</ul>
</div>

一、点击按钮显示隐藏

$(function () { 
	$("#wsView").click(function () {
		if($('#secondMenu').is(':hidden')){
			$("#secondMenu").show();
		}else{
      		$("#secondMenu").hide();	
		}
	});
 })

二、点击空白处隐藏div

	$(function () {  
	    $('#wsView').click(function (event) {  
	         //取消事件冒泡  
	         event.stopPropagation();  
	         //按钮的toggle,如果div是可见的,点击按钮切换为隐藏的;如果是隐藏的,切换为可见的。  
	         $('#secondMenu').slideToggle('slow');  
	         return false;
	     });  
	     //点击空白处隐藏弹出层,下面为滑动消失效果和淡出消失效果。
	     $(document).click(function(event){
	          var _con = $('#wsView');   // 设置目标区域
	          if(!_con.is(event.target) && _con.has(event.target).length === 0){ 
	            $('#secondMenu').slideUp('slow');   //滑动消失
	            //$('#secondMenu').hide(1000);          //淡出消失
	          }
	    });
	 })

.hide() //隐藏
.show() //显示
.slideToggle()//切换滑入和滑出
.slideDown() //滑出
.slideUp() //滑入
.fadeIn() //淡入
.fadeOut() //淡出
.fadeToggle() //切换淡入和淡出
以上的这些动画的方法,一般都可以使用两个参数,参数1:时间,参数2:回调函数
参数—时间:1000 毫秒—1秒
参数—时间:slow—慢,normal—正常,fast—快

更多推荐

jquery实现div的隐藏和显示

本文发布于:2023-03-31 02:17:00,感谢您对本站的认可!
本文链接:https://www.elefans.com/category/jswz/724dc3e33503e5bdf3db8f3ccf1813ca.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文标签:jquery   div

发布评论

评论列表 (有 0 条评论)
草根站长

>www.elefans.com

编程频道|电子爱好者 - 技术资讯及电子产品介绍!