Shulou(Shulou.com)06/01 Report--

This article mainly explains how to hide the drop-down menu in jQuery by clicking on other parts of the page. Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to hide the drop-down menu in jQuery by clicking on the rest of the page.

I. the main points of development

Web pages, we generally do not use select, option to achieve drop-down menu effect, because the style of the drop-down box is ugly and difficult to beautify, so we choose to control ul show hide to achieve the same and high-end effect, but can not click on other parts of the page like the drop-down box, drop-down menu put away or hidden, how should we do? It can only be controlled by Big Brother js.

II. Code

HTML:

Please select 01 02 03 04

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;}

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) / / event object, compatible with IE var target = e.target | | e.srcElement; / / Source object, compatible with Firefox and IE while (target) {if (target.id & & target.id = = "selected") {/ / cycle to the root node, preventing # selected and its child element return;} target = target [XSS _ clean];} $(".list"). Hide () / / instead of clicking # selected and its child elements, hide the drop-down menu})})

Effect:

At this point, I believe you have a deeper understanding of "how to click on other parts of the page to hide the drop-down menu function in jQuery". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.