jQuery點選頁面其他部分隱藏下拉列表

2022-03-06 10:16:48 字數 934 閱讀 3513

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:

js:

$(function

()) $(".list li").click(function

()) $(document).bind("click",function

(e) target =target.parentnode;

}$(".list").hide(); //

點選的不是#selected和它的子元素,隱藏下拉列表

}) })

效果:

點選頁面其他地方隱藏彈窗

doctype html html head meta charset utf 8 title title script src js jquery 2.1.3.min.js script style tip style head body button 點我 button div class ti...

ios入門 點選螢幕其他區域,隱藏軟鍵盤

1 開啟inte ce builder,將檢視控制器 view controller 對應的view的名為class的屬性 option comond 3開啟身份檢查器 更改為uicontrol 2 在控制器類裡新增乙個方法 ibaction backgroundtap id sender 3 將v...

JQuery顯示隱藏頁面元素的方法總結

show 方法 顯示出隱藏的 元素。複製 如下 btn2 click function toggle 方法 toggle 方法切換元素的可見狀態。如果被選元素可見,則隱藏這些元素,如果被選元素隱藏,則顯示這些元素。複製 如下 this is a paragraph.toggle slidedown ...