How to display and hide click buttons in jQuery-JS Tutorial-php.cn

How to display and hide click buttons in jQuery

yulia

Release： 2018-10-29 15:41:37

Original

17799 people have browsed it

jQuery can implement many functions easily and quickly, so it is widely used in front-end development. Friends who are learning jQuery, can you use jQuery to achieve the effect of clicking to display and clicking to hide again (that is, jQuery double-click to hide)? This article will tell you how to use jQuery to achieve click display and hide effects. It has certain reference value. Interested friends can refer to it.

The following introduces two methods for jQuery to implement click display and hiding. One is the toggle() method, and the other is the hide() and show() methods in jquery.

Note: Be sure to remember to introduce the jQuery file, otherwise the effect cannot be achieved

1. The toggle() method in jquery

toggle() method You can add two or more functions to it, and then switch through the click event. When you click, the first specified function is called, and when you click again, the second function is called, and so on, calling in a loop.

Syntax: $(selector).toggle(function)

function refers to the function that needs to be run when clicked

Instance description: When the "Show and Hide Toggle" button is clicked for the first time When clicked, the content of the P tag is hidden. When clicked again, the content of the P tag is displayed. The complete code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <button type="button">显示与隐藏切换</button>
  <p>我可以显示也可以隐藏</p>
  <p>啦啦啦</p>
 </body>
 <script type="text/javascript">
  $(document).ready(function() {
   $("button").click(function() {
    $("p").toggle();
   });
  });
 </script>
</html>

Copy after login

As shown in the picture below, the first picture is the effect when there is no click, and the second picture The picture shows the effect when clicked for the first time, with the content hidden.

How to display and hide click buttons in jQuery

##2. The hide() and show() methods in jquery

hide () method can hide selected elements, similar to the display:none attribute in CSS. The show() method can show hidden selected elements. The usage of hide() and show() is the same, except that one is displayed and the other is hidden.

Syntax: $(selector).hide(speed,easing,callback)

speed represents the speed of display effect, which is an optional value (slow, fast, milliseconds)

easing Used to set the speed of elements at different points of the animation. It is an optional value (swing, linear)
callback indicates the function that needs to be executed after the show() method is executed. It is also an optional value.

Example description: When the "Hide" button is clicked, the content of the P tag is hidden. When the "Show" button is clicked, the content of the P tag is displayed. The specific code is as follows:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
 </head>
 <body>
  <p id="p1">点击隐藏按钮，文字消失<br>点击显示按钮，文字重现</p>
  <button id="hide" type="button">隐藏</button>
  <button id="show" type="button">显示</button>
 </body>
 <script type="text/javascript">
  $(document).ready(function() { 
   $("#hide").click(function() { 
    $("#p1").hide(); 
   }); 
   $("#show").click(function() { 
    $("#p1").show(); 
   });
  });
 </script>
</html>

Copy after login

The effect is as shown in the figure:

How to display and hide click buttons in jQuery

Everyone above introduced the two methods of jQuery to realize click display and hiding. One is the toggle() method, which can achieve the effect of clicking to display and clicking to hide through a button. ;The second method is the hide() and show() methods in jquery, which displays and hides content through two buttons. Which method to choose at work depends on work needs and personal habits. Friends who have never been exposed to it before must practice it by themselves. I hope this article will be helpful to you who love to learn!

【Related Tutorial Recommendations】

jQuery Video Tutorial2.
jQuery Chinese Reference Manual3.
bootstrap tutorial

The above is the detailed content of How to display and hide click buttons in jQuery. For more information, please follow other related articles on the PHP Chinese website!