How does jquery realize Click Show and Click somewhere else to hide

This article mainly introduces jquery how to achieve click display click on other places to hide, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor with you to understand.

Methods: 1, use "$(button element) .click (function () {$(element). Show ();});" statement to click on the button to display elements; 2, use the "$(" body *: not (element) ") statement, click () and hide () method to click on other places to hide elements.

The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.

How to realize click display and click somewhere else to hide in jquery

In jquery, you can use the click method,: not selector, hide () and show () methods to achieve the effect of clicking to show and click elsewhere to hide.

Let's take a look at how to click on the button element to display, and the element is hidden when you click on the element except the button.

Examples are as follows:

$(document) .ready (function () {$("body *: not (.intro)") .click (function () {$("div"). Hide ();}); $(".intro") .click (function () {$("div"). Show ();}); div {width:200px; height:200px; background-color:red;} button

Output result:

Thank you for reading this article carefully. I hope the article "how to click on display and click on other places to hide" shared by the editor will be helpful to everyone. At the same time, I also hope that you will support and pay attention to the industry information channel. More related knowledge is waiting for you to learn!