Home >Web Front-end >JS Tutorial >How to use jquery to display elements by clicking on them and then click on hidden elements again
How to use jquery to display elements by clicking on them and then click on hidden elements again
- WBOYOriginal
- 2021-11-22 16:31:537198browse
Method: 1. Use the click() method to bind the click event to the button and specify the processing function; 2. Use if statements, show() and hide() in the function to implement the syntax "if(element object .is(':hidden')){element object.show();}else{element object.hide();}".
The operating environment of this tutorial: windows7 system, jquery1.10.0 version, Dell G3 computer.
jquery How to click to display an element and click to hide an element again
In jquery, you can use the show() method and hide() method to Click the button to display and click to hide again. The hide() method hides the selected element if it has been displayed. The syntax is:
$(selector).hide(speed,callback)
show() method. If the selected elements have been hidden, these elements are displayed. The syntax is:
$(selector).show(speed,callback)
Let’s take an example to see how to implement the county Click to hide the level display again. The example is as follows:
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
</head>
<body>
<style type="text/css">
div{width:100px;
height:100px;
background: red;
}
</style>
<div id="test"></div>
<button id="anniu">显示与隐藏</button>
<script>
$(function(){
$('#anniu').click(function(){//点击按钮
if($('#test').is(':hidden')){//如果当前隐藏
$('#test').show();//点击显示
}else{//否则
$('#test').hide();//点击隐藏
}
})
})
</script>
</body>
</html>Output result:
The above is the detailed content of How to use jquery to display elements by clicking on them and then click on hidden elements again. For more information, please follow other related articles on the PHP Chinese website!