(原生js)點選body隱藏div，但若點選的是指定的位置則不隱藏

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

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>模擬select控制元件</title>
<style>
html,body{height:100%;overflow:hidden;}
body,div,form,h2,ul,li{margin:0;padding:0;}
ul{list-style-type:none;}
body{background 
:#23384e;font:12px/1.5 5fae8f6f96c59ed1;}
#search,#search form,#search .box,#search .select,#search /*a{background:url(img/search.jpg) no-repeat;}*/
#search,#search .box,#search form{height:34px;}
#search{position:relative;width:350px;margin:10px auto;}
#search .box{background-position:right 0;}
#search form 
{background-repeat:repeat-x;background-position:0 -34px;margin:0 20px 0 40px;}
#search .select{float:left;color:#fff;width:190px;height:22px;cursor:pointer;margin-top:4px;line-height:22px;padding-left:10px;background-position:0 -68px;}
#search a{width:80px;height:24px;color:#333;letter-spacing:4px;line-height 
:22px;text-align:center;text-decoration:none;background-position:0 -90px;margin:4px 0 0 10px;}
#search a:hover{color:#f60;background-position:-80px -90px;}
#search .sub{position:absolute;top:26px;left:40px;background: white;width:198px;border:1px solid #fff;display:none;}
#search .sub li{height:25px;line-height:24px;cursor:pointer;padding-left:0px;margin-bottom:-1px;border-bottom:1px dotted #fff;}
#search .sub li.hover{background:#8b8b8b;}
.show {
    display: none;
    text-align: center;
}
</style>
<script type="text/javascript">
window.onload = function ()
{
    var oSelect = document.getElementsByTagName("span")[0];
    var oSub = document.getElementsByTagName("ul")[0];
    var aLi = oSub.getElementsByTagName("a");
    var z = document.getElementsByClassName("show")[0];
    var i = 0;

    z.onclick = function (event)
    {
        var style = this.style;
        style.display = "block";
        //阻止事件冒泡
        (event || window.event).cancelBubble = true
    };



    oSelect.onclick = function (event)
    {
        var style = z.style;
        style.display = style.display == "block" ? "none" : "block";
        //阻止事件冒泡
        (event || window.event).cancelBubble = true
    };

    for (i = 0; i < aLi.length; i++)
    {
        //滑鼠劃過
        aLi[i].onmouseover = function ()
        {
            this.className = "hover"
        };
        //滑鼠離開
        aLi[i].onmouseout = function ()
        {
            this.className = "";
        };
        //滑鼠點選
        aLi[i].onclick = function ()
        {
            oSelect.innerHTML = this.innerHTML;
            z.style.display = 'none';   
            //阻止事件冒泡
        (event || window.event).cancelBubble = true
        }
    }

    document.onclick = function ()
    {
        z.style.display = "none";   
    };
};
</script>
</head>
<body>
<div id="search">
    <div class="box">
        <form>
            <span class="select">魔獸世界（國服）</span>        
        </form>
    </div>
    <div class="show">
        <ul class="sub" style="display: block;">
        <li class=""><a>地下城與勇士</a></li>
        <li class=""><a>魔獸世界（國服）</li>
        <li class=""><a>魔獸世界（臺服）</a></li>
        <li class=""><a>熱血江湖</a></li>
        <li class=""><a>神鬼傳奇</a></li>
        <li class=""><a>大話西遊II</a></li>
        <li class=""><a>QQ幻想世界</a></li>
        <div class="zuZHi">
            sqf
        </div>
    </ul>

    </div>

</div>



    </body></html>

(原生js)點選body隱藏div，但若點選的是指定的位置則不隱藏

<html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" co

原生JS實現的JSON陣列排序，關鍵字錨點跳轉到指定內容區

原生JS實現的仿點選錨點對應模組跳轉到指定的位置，錨點關鍵字從模組中取出，去除重複值按照由大到小的順序排序//JSON陣列按指定值進行排序排序,name:排序規則 function jsonSort(jsonarr,name,snum){ //如果陣列<=1,則直接返

js實現點選按鈕出現div，點選空白又消失

主要就是兩個點選按鈕，一個是點選讓 div出現，一個是點選空白地方讓它消失，在做的時候先給div新增display：none;進行隱藏，第一次去點選按鈕，讓它變成block，不過要加一個stopPropagation()進行阻止冒泡，然後在寫另一個點選消失的事件，變成none就解決了。div

點選div外區域隱藏div（解決與點選按鈕觸發衝突）

$(document).ready(function() { $(".B").hide(); $(".A").click(function() { $(".B").toggle(); }); }).click(function(e) { e = e || window.event; if(e

原生js怎麽刪除一個 div

ech too tail set -m dtd 寫法 view data- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD

原生JS forEach()和map()遍歷，jQuery$.each()和$.map()遍歷

each ole this asc fin name param view map() 一、原生JS forEach()和map()遍歷共同點： 1.都是循環遍歷數組中的每一項。 2.forEach() 和 map() 裏面每一次執行匿名函數都支持3個參數：數組中的當前項

原生JS寫了一個小demo，根據輸入的數字生成不同背景顏色的小方塊兒~

top == UNC 定位元素 demo TE tostring eight 地方昨天練習寫了這個小demo，個人覺得通過設置定位元素left和top的值，來實現換行的功能，這種方法很巧妙~ 另外，如下代碼中的隨機顏色的獲取，還請各位前輩多多指教：需要改進的地方；或者有

原生JS的（可視區域，向上滾動向下滾動兩種）圖片懶載入

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style>

點選某東西后，如何得知點選的是哪個，並執行操作呢

首先新增一個click <span @click="first(1)">一</span> <span @click="first(2)">二</span> <spa

spring boot專案前臺介面動態新增div，以及特定點選div事件，delegate（）方法。

因為是初次寫前臺介面，在有些地方遇到了很多的問題，其中就包括著後臺得到List,在前臺玄幻div顯示介面，接收資料。一下是迴圈顯示的程式碼。 <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thym

原生js用ajax編寫省市聯動，二級聯動

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>城市聯動</

原生js實現隨著滾動條滾動，導航會自動切換的效果

最近學習前端，把前面用原生js寫的一段有關tab切換效果的程式碼貼上，實現的效果比較簡陋，請大家見諒 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

echarts-點選圖例跳轉，但圖例不被關閉

myChart.setOption(option_science); var triggerAction = function(action, selected) {

原生js實現雙向繫結資料，實現前端提交到後臺

問題專案開發遇到一個問題，就是在提交到後臺的時候遇到一個請求甲方資料，來實現在新增資料的時候，將請求到甲方的資料展示在前端頁面，讓甲方看到他到底添加了哪些資料。因此，使用到了雙向繫結，來顯示彈框中我們選中的資料庫。使用到技術使用了boot

原生js+css3實現圖片自動切換，圖片輪播

運用CSS3transition及opacity屬性製作圖片輪播動畫自己這兩天根據用js來控制觸發CSS3中transition屬性，從而寫出來的以CSS3動畫為基礎，js控制過程的圖片輪播

原生js實現音樂播放器功能，可以實時顯示歌詞並且高亮當前句

最近在做專案，總結一下學到的知識，首先就是一個簡單的音樂播放器。可以顯示歌詞，並且突出顯示當前播放的這一句。但是歌詞必須是要轉碼成utf-8的，不然是亂碼，後面提供我淘到的轉碼工具，非常簡單，把

Android Button按鈕點選兩次之後，才執行點選事件的操作。

在我的專案裡有個頁面同時存在一個EditText和一個Button。如圖。由於每次進入這個頁面都彈出軟鍵盤，所以我在這個提交訂單頁面的AndroidManifest.xml中聲明瞭一句 android:windowSoftInputMode="stateH

原生JS實現購物車的新增刪除，以及總價計算的功能

add方法，傳入一個引數items。items是一個數組，陣列元素為{name:String,price:Number}。通過add方法可以在在購物車列表新增商品 bind方法，實現點選刪除，能夠刪除對應的列同時，注意總計的商品總價應該符合邏輯計算，所有價錢應該保留小數

原生js實現圖片瀑布流佈局，註釋超詳細

完整程式碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=

功能豐富的WordPress點贊插件不少，但對於要在主題中集成簡單文章點贊功能的需求，插件就顯得不合

localhost cal _id domain pda eric func 功能 numeric add_action(‘wp_ajax_nopriv_bigfa_like‘, ‘bigfa_like‘); add_action(‘wp_ajax_bigfa_like‘,

(原生js)點選body隱藏div，但若點選的是指定的位置則不隱藏

相關推薦