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

阿新 • • 發佈：2019-01-04

【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;
    }
})

實戰程式碼

快捷連結

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

【Javascript學習筆記】目錄目錄原理效果程式碼實戰程式碼快捷連結點選任意位置關閉某處而且點選對應處並不會hide掉自己原理

【Javascript學習筆記】【js執行緒實戰— —實現隨機速度的打字機效果】

目錄隨機速度的打字機效果效果程式碼 html部分 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

【JavaScript學習筆記】if使用

document asc cnblogs class body 學習筆記 lang div var <html> <body> <script language="JavaScript">

【JavaScript學習筆記】鼠標樣式

右箭頭 javascrip script mov wait bsp cursor and ossh style="cursor:hand" 手形 style="cursor:crosshair" 十字形 style="cursor:text" 文本

【JavaScript學習筆記】調用google搜索

alt href blog ddl ear input arch -c html <html> <form method=get action="http://www.google.com/search"> <a

【JavaScript學習筆記】畫圖

ctype net ner cli onmouseup move con cursor bsp <!DOCTYPE HTML> <html> <head> <script type="text/ja

【JavaScript學習筆記】hello world

div color html pre 學習筆記 bsp body pan class <html> <body> <script language="JavaScript"> al

【JavaScript學習筆記】點擊消失

hid his script click fun bsp logs document query <!DOCTYPE html> <html> <head> <script type="text/j

【JavaScript學習筆記】1：js的書寫,顯示資料,變數,函式

JavaScript描述的是網頁的行為，可以直接改變HTML而改變網頁的內容，或者提供和使用者的互動。 js寫在哪裡 ①直接寫入HTML JavaScript可以寫在HTML的script雙標籤裡，一般把這個雙標籤放在HEAD頭裡： <

自動複製 JavaScript 指令碼，JavaScript點選任意位置複製指令碼原始碼

其實就是一個複製指令碼：他建立了一個層，然後這個層的z-index層級很高。 Javascript指令碼： (function($$) { var EVAutoCopy = { trigger: null, dd: docum

【JAVAWEB學習筆記】網上商城實戰4：訂單模塊

接收筆記網上商城詳情 src head 分頁查詢 cnblogs logs 今日任務完成訂單模塊的功能 1.1 訂單模塊的功能 1.1.1 我的訂單：【我的訂單的查詢】 * 在header.jsp中點擊我的訂單. * 提交到Servlet:

【JAVAWEB學習筆記】網上商城實戰5：後臺的功能模塊

form 所有實現返回 .com 訂單管理模塊集合後臺今日任務完成後臺的功能模塊 1.1 網上商城的後臺功能的實現: 1.1.1 後臺的功能的需求: 1.1.1.1 分類管理: 【查詢所有分類】 * 在左側菜單

學習筆記：【Web 叢集實戰】05_CentOS 7.x 系統安裝後的基本配置及調優_楊利婷

一、基本配置網路配置網路配置常用的兩種方式為橋接和 NAT 模式。本文采用的是 NAT 模式連線網路。瞭解更多網路型別可參照【Web 叢集實戰】01_VMware 虛擬機器常見的網路型別 1）首先，在宿主機 Windows 的計算機管理 - 服

【ML學習筆記】樸素貝葉斯演算法的demo（機器學習實戰例子）

礙於這學期課程的緊迫，現在需要儘快從課本上掌握一些ML演算法，我本不想經過danger zone，現在看來卻只能儘快進入danger zone，數學理論上的缺陷只能後面找時間彌補了。如果你在讀這篇文章，希望你不要走像我一樣的道路，此舉實在是出於無奈，儘量不要去做一個心

【原】javascript學習筆記之this用法

javascript中的this學習起來相對複雜，最近花了點時間研究，總結起來大概這隻有5種情況，相信只要熟悉這5種用法，基本是可以解決所有的this問題，文字不介紹this設計原理，只介紹用法，閱讀本文，你需要了解javascript執行上下文環境，博主寫這種文章的目的，主要還是給自己做下筆記，後續也會輸出

docker學習筆記5【實戰：將ctfweb題環境docker打包供他人使用】

置頂，一個很不錯的wiki，點這裡歷時三天，玩壞三個虛擬機器，雲伺服器重置一次，終於算是docker入門了，回想起來其實還是linux的一些操作不太熟導致的各種報錯，其實還是比較簡單的，下面用實戰從零來總結一下docker的用法： 1、vmvare安裝ub

大前端學習筆記整理【五】關於JavaScript中的關鍵字——this

寫在前面工作有那麼一段時間了，但是在工作中，發現自己的理論知識還是有所欠缺。特別是在javascript上，很多東西其實自己屬於知道要用這個，但是不知道為什麼要這麼用...這種情況很是尷尬了，所以寫部落格的很重要一個目的就是鍛鍊我自己的總結能力，把學到的東西總結出來，感覺這樣能讓我更快的去理解所學到的東西。

Eric6與pyqt5學習筆記13 【實戰4 打造區域網遠控軟體】

已經去集訓營安心準備考研了，這兩天回校參加夏令營，順便把之前3天課設做的一個小軟體寫個部落格分享下~ 不知道有沒有也是今年考研的研友呢，祝大家都能考上理想的研究生！！！遠控軟體思路遠控軟體基本功能我是這樣劃分的：命令執行。由此拓展而來的控制關

【暑假學習筆記】之——JavaScript的自定義物件、繫結事件及處理機制

假期已經學了10天，但是事情一直比較多，馬上大三了，做你認為有意義的事！這是js學習的最後一部分：自定義物件：在Js中，除了Array、Date、Number等內建物件外，開發者可以通過Js程式碼建立自己的物件。它也稱為JSON物件。自定義物件有三種建立方式：

【JAVAWEB學習筆記】12_Http&Tomcat

請求重定向 san res tor tomcat啟動 zha rac pac b- 一、Http協議 1．什麽是Http協議 HTTP，超文本傳輸協議（HyperText Transfer Protocol)是互聯網上應用最為廣泛的一種網絡協議。所有的WWW文

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

目錄

點選任意位置關閉某處

原理

效果

程式碼

實戰程式碼

快捷連結

相關推薦