首頁 > web前端 > js教程 > 主體

jquery如何控制li元素的顯示與隱藏

WBOY
發布: 2021-11-30 19:23:17
原創
4701 人瀏覽過

jquery控制li元素的顯示與隱藏的方法:1、利用show()方法控制li元素的顯示,語法為「$("li").show()」;2、利用hide( )方法控制li元素的隱藏,語法為「$("li").hide()」。

jquery如何控制li元素的顯示與隱藏

本教學操作環境: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(){
$(&#39;#anniu&#39;).click(function(){//点击按钮
if($(&#39;#test&#39;).is(&#39;:hidden&#39;)){//如果当前隐藏
$(&#39;#test&#39;).show();//点击显示
}else{//否则
$(&#39;#test&#39;).hide();//点击隐藏
}
})
})
</script>
</body>
</html>
登入後複製

輸出結果:

jquery如何控制li元素的顯示與隱藏

相關影片教學推薦:jQuery影片教學

以上是jquery如何控制li元素的顯示與隱藏的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板