Home >Web Front-end >JS Tutorial >How jquery controls the display and hiding of li elements
How jquery controls the display and hiding of li elements: 1. Use the show() method to control the display of li elements. The syntax is "$("li").show()"; 2. Use hide( ) method controls the hiding of li elements, and the syntax is "$("li").hide()".
The operating environment of this tutorial: windows7 system, jquery3.2.1 version, Dell G3 computer.
How does jquery control the display and hiding of li
In jquery, you can control li through the show() method and hide() method For display and hiding, 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)
The example is as follows:
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
</head>
<body>
<ul>
<li id="test">雪碧</li>
<li>可乐</li>
<li>凉茶</li>
</ul>
<button id="anniu">显示与隐藏</button>
<script>
$(function(){
$('#anniu').click(function(){//点击按钮
if($('#test').is(':hidden')){//如果当前隐藏
$('#test').show();//点击显示
}else{//否则
$('#test').hide();//点击隐藏
}
})
})
</script>
</body>
</html>Output result:
Recommended related video tutorials: jQuery video tutorial
The above is the detailed content of How jquery controls the display and hiding of li elements. For more information, please follow other related articles on the PHP Chinese website!