(原生js)點選body隱藏div,但若點選的是指定的位置則不隱藏
<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‘,