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

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

青灯夜游
Release: 2022-09-13 18:03:07
Original
2655 people have browsed it

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() {
	//点击事件发生后,执行的代码
});
Copy after login

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();
Copy after login

Sample code:




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

p元素

p元素

span
需要隐藏的div元素
Copy after login

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)")
Copy after login
          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!

Related labels:
source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template