Jquery allows you to hide specified elements from other places on the page,

Jquery allows you to hide specified elements from other places on the page,

Jquery allows you to hide specified elements from other places on the page:
This function is available in many effects. When you click somewhere else on the page, you can hide a specified element, for example, in the select drop-down menu effect simulated, when the drop-down menu appears, we often hope that the drop-down menu can be hidden when you click somewhere else on the page. The following describes how to implement this function through an instance.
The code example is as follows:

<! DOCTYPE html> 
In the code above, click ant tribe to display the level-2 menu. This level-2 menu is hidden when you click anywhere else on the page, but the blue part cannot hide the level-2 menu, the following describes the implementation process of this effect.
I. Implementation principle:
The principle is very simple. The click event in the blue area uses the function of blocking bubbles, and does not block bubbles in other places. Therefore, when you click, the event can be bubbling to the document, then, hide the secondary drop-down menu.
Ii. Code comments:
1. $ (document). ready (function () {}). When the document structure loads the shore wall, the code in the function is executed.
2. $ (". main"). click (function (e) {}). When you click the ant tribe, you can hide and display the secondary drop-down menu.
3. $ (". list"). toggle (), drop-down menu display and hide switching.
4. e. stopPropagation (): prevents event bubbling. Otherwise, all the bubbles are document, and the level-2 menu is always hidden.
5. $ (document ). click (function () {}) to register the click Time to the document, so that you can click anywhere else to bubble the event to the document, and then hide the level-2 menu, unless the event bubble effect is blocked.
6. $ (". list"). hide () to hide the level-2 menu.
7. $ (". list li "). click (function () {}) and click an item in the level-2 menu to write the current text to the subject, and then hide the level-2 menu.
8. $ (". main"). text ($ (this). text () writes the text of the clicked level-2 menu to the subject.
9. $ (". list"). hide (), hide the Level 2 drop-down menu.
10. $ ("# noPopEvent "). click (function (e) {}) to register the event processing function for the blue block. However, the event bubble effect is blocked, so the level-2 menu is not hidden.
The original address is: http://www.softwhy.com/forum.php? Mod = viewthread & tid = 8527.
For more information, see: http://www.softwhy.com/jquery/