js/jq 點選按鈕顯示div,點選頁面其他任何地方隱藏div

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

整個複製可看效果

1. JS效果

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>無標題文件</title>
    <style type="text/css">
        #pop {
            border: #000;
            background-color: #CCC;
            position 
: absolute;
            left: 50px;
            top: 50px;
            width: 200px;
            height: 500px;
            display: none;
        }

        #btn {
            color: #f00;
        }
    </style>
</head>
<body>
    <span id="btn">開啟層</span>
    <div>aaaaaaaaaaaa</div 
>
    <div>aaaaaaaaaaaa</div>

    <div id="pop">
        浮層，點選這個浮層以外的區域，都可以隱藏這個浮層
        <p><a href="javascript:;">最主要的是點這個div裡面的連結，div照樣不隱藏</a></p>
    </div>
</body>
</html>
<script type="text/javascript">
    function $(id) { return document.getElementById(id); }
    window.onload = function 
 () {
        document.onclick = function (e) {
            $("pop").style.display = "none";
        }
        $("btn").onclick = function (e) {
            $("pop").style.display = "block";
            e = e || event; stopFunc(e);
        }
        $("pop").onclick = function (e) {
            e = e || event; stopFunc(e);
        }
    }
    function stopFunc(e) {
        e.stopPropagation ? e.stopPropagation() : e.cancelBubble = true;
    }
</script>

2. JQ效果

$("#btn").on("click", function(e){
    $("#menu").show();

    $(document).one("click", function(){
        $("#menu").hide();
    });

    e.stopPropagation();
});
$("#menu").on("click", function(e){
    e.stopPropagation();
});

js/jq 點選按鈕顯示div,點選頁面其他任何地方隱藏div

整個複製可看效果 1. JS效果 <!DOCTYPE html> <html> <head> <meta http-equiv="Content

js或jquery實現點選某個按鈕或元素顯示div,點選頁面其他任何地方隱藏div

點選某個元素顯示div,點選頁面其他任何地方隱藏div，可用javascript和jquery兩種方法實現：一：javascript實現方法技巧 <script> //定義stopPropagation 方法的使用，該方法將停止事件的傳播，阻止它被分派到其他 Document 節點。

JS實現預設顯示部分文字點選按鈕顯示全部內容

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html

JavaScript DOM案例點擊按鈕顯示隱藏div

body meta none isp 顯示獲取按鈕 wid title <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

JavaScript DOM操作案例點擊按鈕顯示隱藏div優化後

元素 clas src com 點擊事件 cti charset round dom <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

js 點選按鈕出現，點選其他地方隱藏

//點選所有地方，#bky會隱藏 $(document).click(function(){ $("#bky").hide(); }); //點選 #zcgl_bky 會顯示 #bky $("#zcgl_bky").click(function(event)

JS點選按鈕開啟新的獨立頁面

https://blog.csdn.net/qq_36409820/article/details/76180643 點選按鈕(button)開啟新視窗(window) 從事前端製作的朋友都有碰到過，需要點選按鈕跳轉到另外一個頁面。只要用到簡單的onclick事件就可以簡單

專案--點選按鈕顯示資料，點選空白處隱藏資料

點選空白處隱藏資料點選按鈕顯示資料在這裡插入程式碼片 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <

點選按鈕顯示隱藏內容

<li> <input type="radio" onclick="ydiaosai()"> <label >點選顯示</label> </li> <li> <input type="r

QT用訊號和處理機制為事件新增處理動作（點選按鈕顯示helloworld）

首先新建一個專案命名為“QtGuuitest3” 雙擊 "QtGuitest3.ui" 其中按鈕的名字是pushButton 多行文字框為plainTextEdit 在QtGuuitest3.h中新增 #pragma once #include &

Android TextView限定行數最大值，點選按鈕顯示所有內容

package com.example.eventbusdemo;import android.app.Activity;import android.os.Bundle;import android.util.Log;import android.view.View;import android.view.

點選按鈕顯示hello world

1、新建QT工程2、新增一個QT Gui類3、在設計介面裡，加入一個按鈕、加入一個textEdit4、利用訊號與槽機制編寫程式碼在QTGuiClass.h檔案中加入槽處理函式的生命在QTGuiClass.cpp檔案中，將按鈕觸發訊號和時間處理槽連結起來、然後編寫事件處理函式：注意點：要知道

TextView限定行數,點選按鈕顯示所有內容

在很多app上能看到文字展示收縮效果,點選展示全部,再點選收縮,顯示指定行數的效果,如圖: 預設狀態: 保持顯示不動,展開全部: 實現基本的TextView點選顯示所有內容;一開始實現效果很low,基本是區域性隱藏顯示,這樣很不好,後來看到了Tex

JavaScript基礎下拉列表點擊按鈕顯示當前選項的索引值

element type -type html+css set cnblogs 列表對象 clas 鎮場詩：　　　　清心感悟智慧語，不著世間名與利。學水處下納百川，舍盡貢高我慢意。　　　　學有小成返哺根，願鑄一良心博客。誠心於此寫經驗，願見文者得啟發。—————————

用HTML和CSS實現點擊內容顯示再點擊隱藏

str har ctu box 點擊實現 aep anti 實現思路實現思路： 1.display:none,隱藏元素;點擊時display:black; 2.設置隱藏元素高度為0，overflow:hidden;點擊時overflow:visible; 由於第一條只能

JavaScript——除指定區域外點選任何地方隱藏DIV

效果實現：點選按鈕選單出現: 點選選單外則收

Android點選EditText文字框之外任何地方隱藏鍵盤的解決辦法!(2種)

原文出處:https://blog.csdn.net/mad1989/article/details/25069821 1，實現方法一：通過給當前介面佈局檔案的父layout設定點選事件（相當於給整個Activity設定點選事件），在事件裡進行鍵盤隱藏 <LinearL

Android點選EditText文字框之外任何地方隱藏鍵盤的解決辦法

1，實現方法一：通過給當前介面佈局檔案的父layout設定點選事件（相當於給整個Activity設定點選事件），在事件裡進行鍵盤隱藏 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/a

modal彈框多次被觸發，點選頁面的任何地方，都出現彈層

之前剛開始正式使用mui的時候，要求寫一個頁面，如下圖所示：就是在點選”登入問題點這裡“的時候，顯示彈層，點選彈層上的按鈕，彈層消失。彈層的這個，我是根據demo裡的modals.html來寫的，遇到的第一個問題是，彈層會擋住下面的輸入框，就是說，即使使用者·沒有點選

js寫全選按鈕、全不選按鈕、反選按鈕、全選全不選複選框程式碼

今天主要給大家介紹下如何用js原生程式碼寫出全選、全不選、反選按鈕。程式碼如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titl

js/jq 點選按鈕顯示div,點選頁面其他任何地方隱藏div

相關推薦