jQuery點選頁面其他部分隱藏下拉選單
一、開發小要點
web頁面中,我們一般不用select、option來實現下拉選單效果,因為下拉框的樣式醜且難以美化,所以我們選擇控制ul顯示隱藏來實現同樣且高大上的效果,但是不能像下拉框那樣點選頁面其他部分,下拉選單收起或隱藏,該怎麼辦呢?只能用js這老大哥來控制了。
二、程式碼
HTML:
<div class="select_box" id="selected">
<div class="select">
<span>請選擇</span>
</div>
< ul class="list">
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
</ul>
</div>
CSS:
<style type="text/css">
*{margin:0;padding:0}
ul,ol{list-style: none}
.select_box{
position :relative;
margin:100px auto;
width:300px;
}
.select{
padding:5px 10px;
border:1px solid #dedede;
}
.select:hover{
cursor:pointer;
}
.select span{
display: block;
background:url("../../img/downicon.png") no-repeat right ;
}
.list{
display: none;
position:absolute;
top:30px;
width:298px;
border:1px solid #dedede;
border-top:none;
}
.list li{
padding:5px 10px;
}
.list li:hover{
background:#ddd;
}
</style>
JS:
$(function(){
$(".select").click(function(){
$(".list").toggle();
})
$(".list li").click(function(){
$(".select span").html($(this).html());
$(".list").hide();
})
$(document).bind("click",function(e){
var e = e || window.event; //事件物件,相容IE
var target = e.target || e.srcElement; //源物件,相容火狐和IE
while(target){
if (target.id && target.id == "selected"){ //迴圈判斷至根節點,防止點選的是#selected和它的子元素
return;
}
target = target.parentNode;
}
$(".list").hide(); //點選的不是#selected和它的子元素,隱藏下拉選單
})
})
效果:
相關推薦
jQuery點選頁面其他部分隱藏下拉選單
一、開發小要點 web頁面中,我們一般不用select、option來實現下拉選單效果,因為下拉框的樣式醜且難以美化,所以我們選擇控制ul顯示隱藏來實現同樣且高大上的效果,但是不能像下拉框那樣點選頁面其他部分,下拉選單收起或隱藏,該怎麼辦呢?只能用js這老大哥來控制了。 二、程式碼 HT
android利用PopupWindow實現點選工具欄彈出下拉選單
package com.example.dropdownmenu; import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Map; import android.os.Bu
實現Bootstrap導航條可點選和滑鼠懸停顯示下拉選單
使用Bootstrap導航條元件時,如果你的導航條帶有下拉選單,那麼這個帶下拉選單的導航在點選時只會浮出下拉選單,它本身的href屬性會失效,也就是失去了超連結功能,這並不是我想要的,我希望導航條的連結可以正常開啟它的連結,但又需要下拉選單功能,開始折騰~ 首先解決帶下拉
js或jquery實現點選某個按鈕或元素顯示div,點選頁面其他任何地方隱藏div
點選某個元素顯示div,點選頁面其他任何地方隱藏div,可用javascript和jquery兩種方法實現: 一:javascript實現方法技巧 <script> //定義stopPropagation 方法的使用,該方法將停止事件的傳播,阻止它被分派到其他 Document 節點。
js/jq 點選按鈕顯示div,點選頁面其他任何地方隱藏div
整個複製可看效果 1. JS效果 <!DOCTYPE html> <html> <head> <meta http-equiv="Content
點擊頁面其他地方隱藏彈窗
程序 一次 show auto head 頁面 scrip htm fun <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &
用Jquery點選展開,出現隱藏的DIV,點選收起DIV又隱藏起來.
<script type="text/javascript" src="jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(function() {
JQuery點選一次顯示(隱藏),再點一次(隱藏)/(顯示)
<!DOCTYPE html> <html> <head> <title></title> </head> <scrip
jq點選顯示隱藏下拉選單
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>toggle</title> <s
解決手機點選包含a標籤的下拉框出現背景色問題。
.mobile-menu li a { display: inline-block; width: 100%;  
點選頁面上方tab實現變換左邊選單,點選選單實現右邊內容變化思路!
1、點選tab選項的時候,根據tab資訊生成左邊的選單。 2、點選左邊的選單,將選單超連結到右邊<iframe>標籤的內容中 <a href="../XX.action?codeInfo=Demo123" target="myFrameName"
點選文字框彈出下拉框並賦值
實現下面效果 窗體:Form1: 一:窗體佈局:文字框一個或多個,下拉框一個,初始化隱藏,定義全域性變數 string click_value = ""; private void Form1_Load(object sender, EventArgs e) {
Axure導航欄移入移出顯示隱藏下拉選單——紀梵希官網導航欄動效
最近學習了一下網頁原型製作。仿照紀梵希官網做的網頁原型,其中導航欄涉及邏輯較複雜,打卡記錄一下。 首先,分析官網導航欄動效的需求: 1.滑鼠點選導航選項卡,跳轉至對應的導航頁面。 2.滑鼠移入導航選項卡時,出現對應的下拉選單,選項卡下方顯示選中狀態。 3.滑鼠向上移出選項卡時,下
bootstrap頁面頭部使用者影象下拉選單
1.介面展示 2.HTML程式碼 <div class="logo"> <div class="container-fluid"> <div class="row"> <div
2. AngularJs+JQuery:模糊查詢過濾內容,下拉選單排序,過濾敏感字元,驗證判斷後新增表格資訊
注:新增球員的功能無指定技術要求,新增球員的頁面也無具體樣式要求。 1.實現上圖頁面所有元素,頁面佈局規整,跟上圖效果一致 2.實現文案顯示,按效果顯示 3.實現查詢,實現查詢敏感詞過濾,實現查詢後列表變化 4.實現倒序,實現正序,下拉列表排序效果都實
實現點擊頁面其他地方,隱藏div(vue)
監聽事件 listen function 頁面 比較 als 元素 點擊事件 click 方法一: 通過監聽事件 document.addEventListener(‘click‘,function(e){ if(e.target.
jquery 點選隱藏按鈕的模仿事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </he
點選下拉列表外其他區域,下拉列表框消失
html程式碼 <div class="gdul_searchbox"> <input type="text"> <ul class="search_prompt"> <li></li>
JQuery點選事件回到頁面頂部效果
//2個div,點選某個時回到頂部 <div style="height:1000px">111111111111111</div> <div id="top" >top</div> <引用JQuery> <
easyui中tabs的單tab點選切換其他頁面借用update方法
場景: 一個列表頁面點選某行的某單元,彈出tabs,其中某個tab為一個列表(datagrid),結果列表顯示不全,後採用點選tab切換其他頁面 var URL = ; var tab = $('#tt').tabs('getSelected');