jQuery控制元素顯示與隱藏的三種方式對比

更新時(shí)間：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代碼

首先將下面兩個(gè)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="#">報(bào)表查詢</a></li>
                <li><a href="#">報(bào)表傳送</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="#">銀行理財(cái)</a></li>
            </ul>
        </dd>
    </dl>
</body>
</html>

fadeIn和fadeOut

控制元素的顯示淡入淡出,長度變化就是一瞬間，沒有過渡，但是里面的內(nèi)容會慢慢顯示或者消失。

$(“#tt1”).is(‘:visible’)判斷這個(gè)元素是顯示還是隱藏

<!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="#">報(bào)表查詢</a></li>
                <li><a href="#">報(bào)表傳送</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="#">銀行理財(cái)</a></li>
            </ul>
        </dd>
    </dl>
</body>
</html>