Home  >  Article  >  Web Front-end  >  How to hide div elements by clicking on other elements in jquery

How to hide div elements by clicking on other elements in jquery

青灯夜游
青灯夜游Original
2022-09-13 18:03:072603browse

Implementation steps: 1. Use the ":not()" selector and click() function to bind click events to other elements other than div, and set the processing function, the syntax is "$(":not ('div')").click(function() {//The code executed after the click event occurs});"; 2. In the processing function, use the hide() function to hide the div element, the syntax "$(" div").hide();".

How to hide div elements by clicking on other elements in jquery

The operating environment of this tutorial: windows7 system, jquery3.6.1 version, Dell G3 computer.

In jquery, you can use the :not() selector, click() and hide() methods to hide div elements by clicking on other elements.

Implementation steps:

Step 1: Use: not() selector and click() function to bind clicks to other elements other than div event, and set the processing function

$(":not('div')").click(function() {
	//点击事件发生后,执行的代码
});

In the event processing function, the code written is the effect code achieved after clicking

Step 2: In the processing function, Use the hide() function to hide div elements

$("div").hide();

Sample code:




	
		
		
		<script>
			$(document).ready(function() {
				$(":not(&#39;div&#39;)").click(function() {
					$(&quot;div&quot;).hide();
				});
			});
		</script>
		
	
	
		
需要隐藏的div元素

p元素

p元素

span
需要隐藏的div元素

How to hide div elements by clicking on other elements in jquery

Instructions:

:not() selector selects all elements except the specified element.

The most common usage: used with other selectors to select all elements in the specified combination except the specified element.

$(":not(selector)")
          Parameter           Description
selector Required. Specifies elements that are not selected.
This parameter accepts any type of selector.

[Recommended learning: jQuery video tutorial, web front-end video

The above is the detailed content of How to hide div elements by clicking on other elements in jquery. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn