How to display and hide click buttons in jQuery

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:

 
  
  
  
 

 
  显示与隐藏切换
  
我可以显示也可以隐藏
  
啦啦啦
 
 

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.

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

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.

 
  
  
  
 

 
  
点击隐藏按钮，文字消失
点击显示按钮，文字重现
  隐藏
  显示
 
 

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!