元素隐藏显示,点击元素之外隐藏元素

来源:互联网 发布:淘宝代付申请超限 编辑:程序博客网 时间:2024/05/22 06:49
废话不说,直接代码:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>测试</title>   
<script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script> 
<style>
body{
    background-color: #fff;
}
.main{
    background-color: #f1f1f1;
    border: 4px solid #ccc;
    border-radius: 4px;
    width: 500px;
    margin: 50px auto;
    height: 300px;
}


.sh .main{
    display: none;
}


}
</style>
</head>
<body>
<div class="content">
    <div class="an">按钮</div>
    <div class="main"></div>
</div>
<script type="text/javascript">
    // 这里实现点击实现




$(document).ready(function(){
    $(".an").click(function(e){ //点击.an元素
        event.stopPropagation();//点击an元素的时候,阻止其他点击事件影响该事件。阻止冒泡时间
        $("body").toggleClass("sh");//点击.an元素后body切换:设置sh样式和移除sh样式
    });


    $("body").click(function(){
        $(this).toggleClass("sh");//点击body元素后body切换:设置sh样式和移除sh样式
    });
});
</script>
</body>
</html>
0 0
原创粉丝点击