1. 程式人生 > >【Javascript學習筆記】【DOM實戰— —jQ實現點選任意位置關閉某處的效果(常用於模態框後面的遮罩層)】

【Javascript學習筆記】【DOM實戰— —jQ實現點選任意位置關閉某處的效果(常用於模態框後面的遮罩層)】

【Javascript學習筆記】

目錄

點選任意位置關閉某處

而且點選對應處並不會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);//顯示隱藏
        }
    }
})

效果

這裡寫圖片描述

程式碼

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> <div class="search"> <form action=""> <input type="text" placeholder="請輸入相關搜尋內容"> <a href="javascript:alert('敬請期待')!"><img src="search.png" alt=""></a> </form> </div> <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;
    }
})

實戰程式碼

快捷連結