jquery实现div的隐藏和显示和点击空白显示隐藏
一、点击按钮显示隐藏。
·
$('#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() //切换淡入和淡出
魔乐社区(Modelers.cn) 是一个中立、公益的人工智能社区,提供人工智能工具、模型、数据的托管、展示与应用协同服务,为人工智能开发及爱好者搭建开放的学习交流平台。社区通过理事会方式运作,由全产业链共同建设、共同运营、共同享有,推动国产AI生态繁荣发展。
更多推荐



所有评论(0)