$('#button')是要点击的按钮，$('#view')是要显示或隐藏的内容区域

一、点击按钮显示隐藏

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

二、点击空白处隐藏div

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

.hide() //隐藏
.show() //显示
.slideToggle（）//切换滑入和滑出
.slideDown() //滑出
.slideUp() //滑入
.fadeIn() //淡入
.fadeOut() //淡出
.fadeToggle() //切换淡入和淡出

jquery实现div的隐藏和显示和点击空白显示隐藏相关推荐

vue 点击展开显示更多点击收起部分隐藏
vue 点击展开显示更多点击收起部分隐藏要求: 只展示几条数据,其余的收起.点击显示更多时候,查看全部如下:以百度云的页面为例直接上代码: 1.html部分: <div><d ...
jquery/js 点击空白区域隐藏某一个层/元素
场景:点击一个按钮弹出一个对话框/气泡,点击空白区域隐藏对话框/气泡: html: <button id="btn">按钮</button> <div ...
Android 点击空白出隐藏软键盘
/*** 点击空白位置隐藏软键盘*/@Overridepublic boolean onTouchEvent(MotionEvent event) {if (null != this.getCurr ...
vue点击ul中的li显示，点击其他地方隐藏
vue点击ul中的li显示弹框,点击其他地方隐藏弹框注意:ref="seatTipOperation" <ulref="seatTipOperation" ...
html单击图片效果显示,html点击文字显示图片
这个是网页显示,图片是不需要下载的. 代码: 点击文字显示图片 ul { width: 400px; height: 600px; border-style: solid; border-width: ...
js实现点击空白部分隐藏div
实现思路: 可以将一个最外面的div绑定一个点击事件样式设置成宽度100% 高度也是100% 颜色可以弄成透明或者不设置颜色这个时候div是撑满全屏幕的所以这样点击哪里 JS都可以获取 ...
深入React事件系统(React点击空白部分隐藏弹出层；React阻止事件冒泡失效)
只关注括号内问题的同学,可直接跳转到蓝字部分.(标题起的有点大,其实只讨论一个问题) 两个在React组件上绑定的事件,产生冲突后,使用e.stopPropagation(),阻止冒泡,即可防止事件冲 ...
jQuery: 仿select下拉框效果，点击空白关闭弹出层，判断是否被mouseover
1. 方法一 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...
Android8.1 MTK平台增加三指截屏(仿IOS左下角显示缩略图点击放大显示)
效果图修改后动画如下系统原动画如下三指截屏 PhoneWindowManager 同级目录下的 SystemGesturesPointerEventListener.java 主要负责处理界面的 ...

jquery实现div的隐藏和显示和点击空白显示隐藏

二、点击空白处隐藏div

jquery实现div的隐藏和显示和点击空白显示隐藏相关推荐

最新文章

热门文章