Home > Web Front-end > JS Tutorial > body text

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

WBOY
Release: 2021-12-13 19:12:56
Original
7783 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!

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