1500字范文,内容丰富有趣,写作好帮手!
1500字范文 > jquery实现div的隐藏和显示

jquery实现div的隐藏和显示

时间:2019-01-15 19:54:26

相关推荐

jquery实现div的隐藏和显示

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—快

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。