Home > Article > Web Front-end > How to implement jquery click to display and click elsewhere to hide
How to implement jquery click to display and click elsewhere to hide
- WBOYOriginal
- 2021-12-13 19:12:567778browse
Method: 1. Use the "$(button element).click(function(){$(element).show();});" statement to realize clicking the button to display the element; 2. Use "$( The "body *:not(element)")" statement, click() and hide() methods implement clicking on other places to hide elements.
The operating environment of this tutorial: windows10 system, jquery3.2.1 version, Dell G3 computer.
How jquery implements clicking to display and clicking elsewhere to hide
In jquery, you can use the click method, :not selector, hide() and show() method to realize the effect of clicking to show and clicking elsewhere to hide.
Let's take an example to see how to display the button element when clicking on it, and hide the element when clicking on the element other than the button.
The example is as follows:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("body *:not(.intro)").click(function(){
$("div").hide();
});
$(".intro").click(function(){
$("div").show();
});
});
</script>
<style type="text/css">
div{
width:200px;
height:200px;
background-color:red;
}
</style>
</head>
<body>
<div></div>
<button class="intro">按钮</button>
</body>
</html>Output result:
Related video tutorial recommendation: jQuery video tutorial
The above is the detailed content of How to implement jquery click to display and click elsewhere to hide. For more information, please follow other related articles on the PHP Chinese website!