jquery控制li元素的顯示與隱藏的方法:1、利用show()方法控制li元素的顯示,語法為「$("li").show()」;2、利用hide( )方法控制li元素的隱藏,語法為「$("li").hide()」。
本教學操作環境:windows7系統、jquery3.2.1版本、Dell G3電腦。
jquery怎麼控制li的顯示與隱藏
#在jquery中,可以用show()方法和hide()方法來控制li的顯示與隱藏,hide()方法如果被選取的元素已被顯示,則隱藏該元素。語法為:
$(selector).hide(speed,callback)
show()方法如果被選元素已隱藏,則顯示這些元素,語法為:
$(selector).show(speed,callback)
範例如下:
<!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>
輸出結果:
相關影片教學推薦:jQuery影片教學
以上是jquery如何控制li元素的顯示與隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章!