jQuery控制元素顯示與隱藏的三種方式對比
更新時間：2023年06月13日 09:10:22 作者：H-rosy
使用jquery控制div的顯示與隱藏,一句話就能搞定,下面這篇文章主要給大家介紹了關(guān)于jQuery控制元素顯示與隱藏的三種方式對比,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
hide和show
hide:是$(“.類名”)或$(“#標(biāo)簽名”)或$(“標(biāo)簽名”).hide()
show:是$(“.類名”)或$(“#標(biāo)簽名”)或$(“標(biāo)簽名”).show()
元素直接消失，沒有任何動態(tài)效果
slideToggle
通過控制元素的高度來顯示與隱藏，因此會有動畫效果。slideToggle如果你操作的與元素是隱藏的，那么那就會顯示，如果是顯示的那么就會隱藏。
完整demo，需要你自己下載jQuery.js代碼
首先將下面兩個dd的display置為none。
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./js/jquery-2.2.3.js"></script>
<script>
// 補(bǔ)全代碼，實(shí)現(xiàn)手風(fēng)琴菜單功能
$(function(){
$(".dl .test").click(function(){
if($(this).text()==="系統(tǒng)管理"){
$("#tt1").stop().slideToggle()
}else if($(this).text()==="日常業(yè)務(wù)"){
$("#tt2").stop().slideToggle()
}else if($(this).text()==="投資業(yè)務(wù)"){
$("#tt3").stop().slideToggle()
}
})
})
</script>
<style>
dl {
width: 150px;
background-color: antiquewhite;
border: 1px solid black;
}
dt {
background: #00ffff;
font-size: 14px;
margin-top: 2px;
text-align: center;
padding-top:5px;
padding-bottom:3px;
}
dd {
margin-left: 0px;
margin-right:0px;
font-size: 14px;
border: 1px solid white;
text-align: center;
}
a {
text-decoration: none;
}
ul {
list-style: none;
padding: 3px;
}
li {
border-bottom: 1px solid white;
margin-bottom:5px;
background-color:#ffd800;
padding-top:5px;
padding-bottom:3px;
}
li:hover {
background-color: black;
}
li:hover a {
color: white;
}
#tt2,#tt3{
display: none;
}
</style>
</head>
<body>
<dl class="dl">
<dt class="test"><a href="#">系統(tǒng)管理</a></dt>
<dd id="tt1">
<ul>
<li><a href="#">員工管理</a></li>
<li><a href="#">賬戶管理</a></li>
<li><a href="#">客戶管理</a></li>
<li><a href="#">資產(chǎn)管理</a></li>
</ul>
</dd>
<dt class="test"><a href="#" >日常業(yè)務(wù)</a></dt>
<dd id="tt2">
<ul>
<li><a href="#">憑證錄入</a></li>
<li><a href="#" onclick="alert('歡迎來到j(luò)Query世界！')"> 數(shù)據(jù)修改</a></li>
<li><a href="#">報表查詢</a></li>
<li><a href="#">報表傳送</a></li>
</ul>
</dd>
<dt class="test"><a href="#" >投資業(yè)務(wù)</a></dt>
<dd id="tt3">
<ul>
<li><a href="#">滬深股市</a></li>
<li><a href="#">白銀現(xiàn)貨</a></li>
<li><a href="#">私募基金</a></li>
<li><a href="#">銀行理財</a></li>
</ul>
</dd>
</dl>
</body>
</html>fadeIn和fadeOut
控制元素的顯示淡入淡出,長度變化就是一瞬間，沒有過渡，但是里面的內(nèi)容會慢慢顯示或者消失。
$(“#tt1”).is(‘:visible’)判斷這個元素是顯示還是隱藏
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="./js/jquery-2.2.3.js"></script>
<script>
// 補(bǔ)全代碼，實(shí)現(xiàn)手風(fēng)琴菜單功能
$(function(){
$(".dl .test").click(function(){
let vis1=$("#tt1").is(':visible')
let vis2=$("#tt2").is(':visible')
let vis3=$("#tt3").is(':visible')
$("dd").fadeOut()
if($(this).text()==="系統(tǒng)管理"){
console.log(vis1);
if(vis1){
$("#tt1").hide()
return
}
$("#tt1").stop().fadeIn()
// $("#tt1").stop().slideToggle()
}else if($(this).text()==="日常業(yè)務(wù)"){
$("#tt2").stop().fadeIn()
}else if($(this).text()==="投資業(yè)務(wù)"){
$("#tt3").stop().fadeIn()
}
})
})
</script>
<style>
dl {
width: 150px;
background-color: antiquewhite;
border: 1px solid black;
}
dt {
background: #00ffff;
font-size: 14px;
margin-top: 2px;
text-align: center;
padding-top:5px;
padding-bottom:3px;
}
dd {
margin-left: 0px;
margin-right:0px;
font-size: 14px;
border: 1px solid white;
text-align: center;
}
a {
text-decoration: none;
}
ul {
list-style: none;
padding: 3px;
}
li {
border-bottom: 1px solid white;
margin-bottom:5px;
background-color:#ffd800;
padding-top:5px;
padding-bottom:3px;
}
li:hover {
background-color: black;
}
li:hover a {
color: white;
}
#tt2,#tt3{
display: none;
}
</style>
</head>
<body>
<dl class="dl">
<dt class="test"><a href="#">系統(tǒng)管理</a></dt>
<dd id="tt1">
<ul>
<li><a href="#">員工管理</a></li>
<li><a href="#">賬戶管理</a></li>
<li><a href="#">客戶管理</a></li>
<li><a href="#">資產(chǎn)管理</a></li>
</ul>
</dd>
<dt class="test"><a href="#" >日常業(yè)務(wù)</a></dt>
<dd id="tt2">
<ul>
<li><a href="#">憑證錄入</a></li>
<li><a href="#" onclick="alert('歡迎來到j(luò)Query世界！')"> 數(shù)據(jù)修改</a></li>
<li><a href="#">報表查詢</a></li>
<li><a href="#">報表傳送</a></li>
</ul>
</dd>
<dt class="test"><a href="#" >投資業(yè)務(wù)</a></dt>
<dd id="tt3">
<ul>
<li><a href="#">滬深股市</a></li>
<li><a href="#">白銀現(xiàn)貨</a></li>
<li><a href="#">私募基金</a></li>
<li><a href="#">銀行理財</a></li>
</ul>
</dd>
</dl>
</body>
</html>總結(jié)
到此這篇關(guān)于jQuery控制元素顯示與隱藏的三種方式對比的文章就介紹到這了,更多相關(guān)jQuery控制元素顯示與隱藏內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
jQuery實(shí)現(xiàn)倒計時按鈕功能代碼分享
這篇文章主要介紹了jQuery實(shí)現(xiàn)倒計時按鈕功能代碼分享,一般用在短信發(fā)送倒計時按鈕情景,本文給出了幾個例子,需要的朋友可以參考下2014-09-09
jQuey將序列化對象在前臺顯示地實(shí)現(xiàn)代碼(方法總結(jié))
本文給大家分享jQuey將序列化對象在前臺顯示地的幾種方式，非常不錯，具有參考借鑒價值，需要的朋友一起看看吧2016-12-12
用jQuery實(shí)現(xiàn)可輸入多選下拉組合框?qū)嵗a
這篇文章主要介紹了用jquery實(shí)現(xiàn)可輸入多選下拉組合框的實(shí)例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下2017-01-01
jQuery控制li上下循環(huán)滾動插件用法實(shí)例(附demo源碼下載)
這篇文章主要介紹了jQuery控制li上下循環(huán)滾動插件用法,結(jié)合實(shí)例形式分析了jQuery循環(huán)滾動插件的實(shí)現(xiàn)技巧與使用方法,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-05-05
JavaScript獲取onclick、onchange等事件值的代碼
這里主要是用到了getAttributeNode()這個方法，它獲取的是屬性節(jié)點(diǎn)，忽略屬性和事件的差別，具體示例如下，感興趣的朋友可以參考下哈希望對大家有所幫助2013-07-07
這篇文章主要介紹了jQuery中:button選擇器用法,實(shí)例分析了:button選擇器的功能、定義及選取按鈕的使用技巧,需要的朋友可以參考下2015-01-01
鼠標(biāo)事件是指用戶在移動鼠標(biāo)光標(biāo)或者點(diǎn)擊任意鼠標(biāo)鍵時觸發(fā)的事件,jQuery中封裝了基本上所有的鼠標(biāo)事件包括點(diǎn)擊,雙擊,移動等鼠標(biāo)事件,下面我們就來看下這些事件的語法和用法2015-08-08
如何利用JQuery實(shí)現(xiàn)從底部回到頂部的功能
現(xiàn)在大部分網(wǎng)站因?yàn)槠容^長，所以都會設(shè)置這么一個按鈕，利用這個按鈕可以實(shí)現(xiàn)從底部返回頂部的功能。下面通過實(shí)例代碼給大家簡單介紹一下吧2016-12-12
在jQuery中最快的選擇器是ID選擇器，因?yàn)樗苯觼碜杂贘avaScript的getElementById()方法2009-05-05
jQuery+CSS3實(shí)現(xiàn)點(diǎn)贊功能
本篇文章主要介紹了jQuery+CSS3實(shí)現(xiàn)點(diǎn)贊功能的示例代碼。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03