Home > Article > Web Front-end > How to display and hide click buttons in jQuery
How to display and hide click buttons in jQuery
- yuliaOriginal
- 2018-10-29 15:41:3717785browse
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>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
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.
<!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>The effect is as shown in the figure:
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!