Home > Article > Web Front-end > DOM case sharing—jQ realizes the effect of clicking anywhere to close a certain place

DOM case sharing—jQ realizes the effect of clicking anywhere to close a certain place

php是最好的语言Original: 2018-08-02 10:07:161570browse

Practical combat of DOM in Javascript learning, jQ realizes the effect of clicking anywhere to close a certain place (often used in the mask layer behind the modal box)

Click anywhere Closing a certain place

and clicking the corresponding place will not hide yourself

Principle

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

I took out some of the following web pages in practice, so the final style may be different.
The idea is

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

Effect

DOM case sharing—jQ realizes the effect of clicking anywhere to close a certain place

Code

html part

<!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(&#39;敬请期待&#39;)!">理工首页&ensp;|&ensp;</a></li>
    <li><a href="javascript:alert(&#39;敬请期待&#39;)!">收藏本页&ensp;|&ensp;</a></li>
    <li><a href="javascript:alert(&#39;敬请期待&#39;)!">English</a></li></ul><a href="javascript:alert(&#39;敬请期待&#39;)!" class="searchBtn"><img src="search.png" alt=""></a><p class="search">
    <form action="">
        <input type="text" placeholder="请输入相关搜索内容">
        <a href="javascript:alert(&#39;敬请期待&#39;)!"><img src="search.png" alt=""></a>
    </form></p>
    <script src="../jquery.min.js"></script>
    <script src="backspacing.js"></script></body></html>

js part

// 搜索框的出现&&隐藏$(".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 realizes the effect of closing the pop-up layer outside the pop-up layer by clicking anywhere

JavaScript click on the web page Implementation code for opening new windows and closing windows at any location

DOM case sharing—jQ realizes the effect of clicking anywhere to close a certain place

Click anywhere Closing a certain place

Principle

Effect

Code

Related articles