欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

DOM案例分享—jQ实现点击任意位置关闭某处的效果

程序员文章站 2022-04-30 08:46:49
...

Javascript学习中DOM的实战,jQ实现点击任意位置关闭某处的效果(常用于模态框后面的遮罩层)

点击任意位置关闭某处

而且点击对应处并不会hide掉自己

原理

//点击文档任意处都触发该事件$(document).mousedown(function(e){
    //只有当某对象存在时才会有的点击任意处出现的事件效果
    if($(e.target).parents(".search").length==0){
        $("xxx").slideToggle(300);//显示隐藏
    }
})

下列网页实战中我取出部分,因此最后看起来样式可能不相同。
其中思想是

//点击文档任意处都触发该事件$(document).mousedown(function(e){
    if(想要显示的对象如果是在显示状态时才有以下的触发效果){        //只有当某对象存在时才会有的点击任意处出现的事件效果
        if($(e.target).parents(".search").length==0){
            $("xxx").slideToggle(300);//显示隐藏
        }
    }
})

效果

DOM案例分享—jQ实现点击任意位置关闭某处的效果

代码

html部分

<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <title>backspacing</title>
    <style type="text/css">
        html{            background: #666;        }
        .topList{            float: right;            margin-right: 36px;            list-style: none;        }
        .topList li{            float: left;            height: 35px;            line-height: 35px;            text-align: center;        }
        .topList a{            color: #fff;        }
        .topList a:active,        .topList a:focus,        .topList a:hover{            color: #fff;            text-decoration: none;        }
        .searchBtn{            position: absolute;            right: 0;            top: 3px;            width: 35px;            height: 35px;        }
        .searchBtn img{            position: absolute;            right: 0px;            top: 7px;            width: 16px;            height: 16px;            display: block;        }
        .search{            display: none;            position: absolute;            right: 0;            top: 0;            width: 190px;            height: 35px;        }
        .search input{            position: absolute;            right: 0px;            top: 0px;            width: 100%;            height: 31px;            border:0;            border-bottom: 1px solid #fff;            background: #89C997;            color: #fff !important;            padding-right:30px;        }
        .search input::-webkit-input-placeholder{            color: #fff;        }
        .search input::-moz-placeholder{            color: #fff;        }
        .search input::-ms-input-placeholder{            color: #fff;        }
        .search input::-moz-placeholder{            color: #fff;        }
        .search a{            position: absolute;            right: 0px;            top: 7px;            width: 16px;            height: 16px;            border-radius: 25px;        }
        .search img{            width: 16px;            height: 16px;        }
    </style></head><body><ul class="topList">
    <li><a href="javascript:alert('敬请期待')!">理工首页&ensp;|&ensp;</a></li>
    <li><a href="javascript:alert('敬请期待')!">收藏本页&ensp;|&ensp;</a></li>
    <li><a href="javascript:alert('敬请期待')!">English</a></li></ul><a href="javascript:alert('敬请期待')!" class="searchBtn"><img src="search.png" alt=""></a><p class="search">
    <form action="">
        <input type="text" placeholder="请输入相关搜索内容">
        <a href="javascript:alert('敬请期待')!"><img src="search.png" alt=""></a>
    </form></p>
    <script src="../jquery.min.js"></script>
    <script src="backspacing.js"></script></body></html>

js部分

// 搜索框的出现&&隐藏$(".searchBtn").click(function(){
    $(".searchBtn").slideToggle(300);
    $(".search").slideToggle(300);
    $(".topList").slideToggle(100);
});
$(document).mousedown(function(e){
    if(!($(".search").is(":hidden"))){        if($(e.target).parents(".search").length==0){
            $(".searchBtn").slideToggle(300);
            $(".search").slideToggle(300);
            $(".topList").slideToggle(100);
        }
    }else{        return false;
    }
})

相关文章:

jQuery实现点击任意位置弹出层外关闭弹出层效果

JavaScript单击网页任意位置打开新窗口与关闭窗口的实现代码

相关视频:

DOM探索之基础详解篇

以上就是DOM案例分享—jQ实现点击任意位置关闭某处的效果的详细内容,更多请关注其它相关文章!

相关标签: DOM