jQuery控制元素的显示与隐藏(三种方式对比)

这篇具有很好参考价值的文章主要介绍了jQuery控制元素的显示与隐藏(三种方式对比)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

hide和show

hide:是$(“.类名”)或$(“#标签名”)或$(“标签名”).hide()
show:是$(“.类名”)或$(“#标签名”)或$(“标签名”).show()

元素直接消失,没有任何动态效果

slideToggle

通过控制元素的高度来显示与隐藏,因此会有动画效果。slideToggle如果你操作的与元素是隐藏的,那么那就会显示,如果是显示的那么就会隐藏。
jQuery控制元素的显示与隐藏(三种方式对比)
完整demo,需要你自己下载jQuery.js代码

首先将下面两个dd的display置为none。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="./js/jquery-2.2.3.js"></script>
    <script>
      // 补全代码,实现手风琴菜单功能
     
     $(function(){
        $(".dl .test").click(function(){ 
           if($(this).text()==="系统管理"){      
            $("#tt1").stop().slideToggle()
           }else if($(this).text()==="日常业务"){
            $("#tt2").stop().slideToggle()
           }else if($(this).text()==="投资业务"){
            $("#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="#">系统管理</a></dt>
        <dd  id="tt1">
            <ul>
                <li><a href="#">员工管理</a></li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">客户管理</a></li>
                <li><a href="#">资产管理</a></li>

            </ul>
        </dd>
        <dt  class="test"><a href="#" >日常业务</a></dt>
        <dd id="tt2">
            <ul>
                <li><a href="#">凭证录入</a></li>
                <li><a href="#" onclick="alert('欢迎来到jQuery世界!')"> 数据修改</a></li>
                <li><a href="#">报表查询</a></li>
                <li><a href="#">报表传送</a></li>

            </ul>
        </dd>
        <dt class="test"><a href="#"  >投资业务</a></dt>
        <dd id="tt3">
            <ul>
                <li><a href="#">沪深股市</a></li>
                <li><a href="#">白银现货</a></li>
                <li><a href="#">私募基金</a></li>
                <li><a href="#">银行理财</a></li>
            </ul>
        </dd>
    </dl>
</body>
</html>

fadeIn和fadeOut

控制元素的显示淡入淡出,长度变化就是一瞬间,没有过渡,但是里面的内容会慢慢显示或者消失。

$(“#tt1”).is(‘:visible’)判断这个元素是显示还是隐藏文章来源地址https://www.toymoban.com/news/detail-450605.html

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="./js/jquery-2.2.3.js"></script>
    <script>
      // 补全代码,实现手风琴菜单功能
    
     $(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()==="系统管理"){    
            console.log(vis1);
            if(vis1){
                $("#tt1").hide()
                return
            } 
            $("#tt1").stop().fadeIn()
            // $("#tt1").stop().slideToggle()
           }else if($(this).text()==="日常业务"){
            $("#tt2").stop().fadeIn()
           }else if($(this).text()==="投资业务"){
            $("#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="#">系统管理</a></dt>
        <dd  id="tt1">
            <ul>
                <li><a href="#">员工管理</a></li>
                <li><a href="#">账户管理</a></li>
                <li><a href="#">客户管理</a></li>
                <li><a href="#">资产管理</a></li>

            </ul>
        </dd>
        <dt  class="test"><a href="#" >日常业务</a></dt>
        <dd id="tt2">
            <ul>
                <li><a href="#">凭证录入</a></li>
                <li><a href="#" onclick="alert('欢迎来到jQuery世界!')"> 数据修改</a></li>
                <li><a href="#">报表查询</a></li>
                <li><a href="#">报表传送</a></li>

            </ul>
        </dd>
        <dt class="test"><a href="#"  >投资业务</a></dt>
        <dd id="tt3">
            <ul>
                <li><a href="#">沪深股市</a></li>
                <li><a href="#">白银现货</a></li>
                <li><a href="#">私募基金</a></li>
                <li><a href="#">银行理财</a></li>
            </ul>
        </dd>
    </dl>
</body>
</html>

到了这里,关于jQuery控制元素的显示与隐藏(三种方式对比)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【CSS】鼠标移动到元素上方显示 / 移出盒子范围隐藏案例 ( 子绝父相 | 显示隐藏元素对象 | 鼠标经过样式设置 | 半透明遮罩设置 )

    这里要 在一个 div 盒子上方套一层遮罩 , 遮罩就需要 使用绝对定位将其覆盖到其它元素中 ; 子元素使用了 绝对定位 , 父元素必须使用 相对定位 ; 使用 样式 隐藏元素 , 使用 样式 显示元素 ; 鼠标经过 链接 时 , 显示 链接 中的 one 元素 , 需要使用如下选择器 进行设置 ; 使用

    2024年02月10日
    浏览(55)
  • css面试题:css隐藏元素的方式

    特点:父元素设置该属性时,子元素同样会生效,但可以通过visibility:visible;修改子元素的显示效果; 特点:作用是从dom中移除节点,所以子元素也会被移除掉, 该方法通过改变元素透明度来实现隐藏,但需要注意父元素设置为opacity:0后,子元素会继承父元素该属性的效果,

    2024年02月13日
    浏览(37)
  • css中有哪些方式可以隐藏页面元素?区别?

    在平常的样式排版中,我们经常遇到将某个模块隐藏的场景 通过 css 隐藏元素的方法有很多种,它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪一种方法 通过 css 实现隐藏元素方法有如下: display:none visibi

    2024年01月23日
    浏览(50)
  • CSS中隐藏页面元素的几种方式和区别

    前言、 在平常的样式排版中,我们经常遇到将某个模块隐藏的场景,通过css隐藏的元素方法有很多种,它们看起来实现的效果是一致的,但实际上每一种方法都有一丝轻微的不同,这些不同决定了在一些特定场合下使用哪一种方法。 实现方法综合、 通过css实现隐藏元素方法

    2024年01月20日
    浏览(70)
  • 【CSS 08】display 控制布局 块级元素 行内元素 隐藏元素 结合JS 最大宽度 浏览器窗口 定位 position z-index 堆叠

    说在前面 CSS基础教程系列已经结束,接下来就是中级教程,让我们跟上脚步,继续努力吧! 并且最近临近期末考试,后面十天休刊… display display 属性是用于控制布局的最重要的 CSS 属性 display 属性规定是否/如何显示元素 隐藏元素 - display:none 还是 visibility:hidden 通过将 disp

    2024年02月08日
    浏览(57)
  • Boostrap5通过JS控制Offcanvas的显示隐藏

    vue3 vite bootstrap5 在用bootstrap5的时候遇到一个问题,就是offcanvas在nav上的时候居然会有两个背景BackDrop,关闭之后页面上还有一个backdrop留在那 bootstrap5文档里面提供了几个Method可以控制Offcanvas实例的显示隐藏,但是不会用 点击offcanvas中的导航控件,页面正常跳转,但是无法关

    2024年03月14日
    浏览(32)
  • element ui根据复选框控制字段显示和隐藏

    复选框值为true和false,我这是默认为true,所有字段都显示,不勾选,则显示两个字段,根据if-else来控制,取值判断是否为true,true的话则显示,false则隐藏。 前端代码如下: template div class=\\\"app-container\\\" div class=\\\"mainbox\\\" div class=\\\"table-container table-fullscreen\\\" div class=\\\"table-opt-container

    2024年01月25日
    浏览(33)
  • Element ui Table组件动态控制列的显示隐藏

     最近遇到一个需求,要求可以动态控制 table 列表中的列的显示与隐藏,并且将选中的列进行存储,下次进入页面仍展示上次勾选的列。 经过查阅资料,实现了这个功能,创建一个Table.vue文件,组件封装代码如下:  组件用法如下,新建一个index.vue,将Table组件引入使用:

    2024年02月08日
    浏览(52)
  • Android 12.0 系统settings系统属性控制一级菜单显示隐藏

    在12.0的系统rom定制化开发中,系统settings的一级菜单有些在客户需求中,要求通过系统属性来控制显示隐藏,从而达到控制一级菜单的显示的目的,而系统settings是通过静态加载的方式负责显示隐藏

    2024年02月06日
    浏览(132)
  • 韦根、RS485、TCP/IP三种门禁通讯方式的优缺点对比

    韦根通讯 韦根通讯协议是由摩托罗拉公司制定的一种通讯协议,具有国际统一标准。它适用于涉及门禁控制系统的读卡器和卡片的许多特性,是智能门禁最早使用的门禁通讯方式,但现在基本已经看不到它的身影了。 优点: 实现简单,基本上任意单片机都可以实现,成本低

    2024年02月13日
    浏览(57)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包