How to implement jquery click to display and click elsewhere to hide-JS Tutorial-php.cn

How to implement jquery click to display and click elsewhere to hide

WBOY

Release： 2021-12-13 19:12:56

Original

7602 people have browsed it

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.

How to implement jquery click to display and click elsewhere to hide

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>

Copy after login

Output result:

How to implement jquery click to display and click elsewhere to hide

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!