有时候我们希望实现toggle()切换效果，但是切换的同时需要完成一些其他要做的事情。所以我们需要对jQuery的toggle()函数进行改造。

下面好test2()函数就是一个实现toggle效果的函数:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            function test1() {

                $("#test").toggle();

            }

            function test2() {

                if($("#test").css('display') == 'none') {

                    //自己的处理

                    $("#test").show();

                } else {

                    //自己的处理

                    $("#test").hide();

                }

            }

        </script>

    </head>

    <body>

        <button type="button" onclick="test1()" value="">方式一</button>

        <button type="button" onclick="test2()" value="">方式二</button>

        <div id="test">

            测试div

        </div>

    </body>

</html>

也可以用原生的js实现:

var display = document.getElementById(‘id’).style.display;

if(display=='none'){

document.getElementById(‘id’).style.display = '';

}else{

document.getElementById(‘id’).style.display = 'none';

}

效果可以实现div的隐藏与显示。

一个完整的隐藏菜单栏与改变页面内容区大小的JS

/**

 * Qlq 2018.1.17缩进菜单(菜单的缩回去与显示效果)

 */

$(function() {

    // 菜单栏的缩放

    $("#toggleMenu").click(function() {

        toggleMenu();

    });

});

// 图标的点击事件(缩进菜单)

function toggleMenu() {

//    将菜单显示出来

    if ($(".el_left").css('display') == 'none') {

        //1.先将右面缩回去。2.右边完成之后左边菜单显示

        $(".el_right").animate({

            width : "87%"

        }, {

            duration : 1000,

            complete : function() {

                $(".el_left").show(1000);

                //更换图标的src属性

                $("#toggleMenu").prop("src",contextPath+"/image/show.png");

            }

        });

    } else {

        //     将菜单隐藏掉

        //1.先将菜单缩回去。2.左边完成之后右边界面占满全屏

        $(".el_left").hide(1000, function() {

            $(".el_right").animate({

                width : "100%"

            }, 1000);

            //更换图标的src属性

            $("#toggleMenu").prop("src",contextPath+"/image/hide.png");

        });

    }

}

另一个toggle效果，在隐藏与显示之后更换图标:(bootstrap框架)

/** *****************S QLQ 显示与隐藏查询条件******************** */

function toggleQueryDiv() {

    // 点击显示查询条件与分割符

    if ($("#queryDiv").css("display") == "none") {

        $("#queryDiv").show(

                "slow",

                function() {

                    // 删除class属性(切换上下箭头)

                    $(".glyphicon-chevron-down").removeClass().addClass(

                            "glyphicon glyphicon-chevron-up").prop("title",

                            "点击隐藏查询条件");

                });

    } else {//隱藏条件与分割符

        $("#queryDiv").hide(

                "slow",

                function() {

                    //删除class属性(切换上下箭头)

                    $(".glyphicon-chevron-up").removeClass().addClass(

                            "glyphicon glyphicon-chevron-down").prop("title",

                            "点击显示查询条件");

                });

    }

}

/*******************E QLQ 显示与隐藏查询条件*********************/

另一个toggle效果，在隐藏与显示之后更换提示内容:(layui框架)

/** *****************S 显示与隐藏培养方案基本信息******************** */

/**

 * 显示与隐藏培养方案基本信息

 * @param obj

 */

function toggleTrainSchemeBaseInfoDiv(obj) {

    // 点击显示查询条件与分割符

    if ($("#trainSchemeBaseInfo").css("display") == "none") {

        $("#trainSchemeBaseInfo").show(

            "slow",

            function() {

              $(obj).attr("title","点击隐藏培养方案基本信息");

            });

    } else {//隱藏条件与分割符

        $("#trainSchemeBaseInfo").hide(

            "slow",

            function() {

                $(obj).attr("title","点击显示培养方案基本信息");

            });

    }

}

/*******************E 显示与隐藏查询条件*********************/

手动实现jQuery的toggle()效果的更多相关文章

  1. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  2. 关于jQuery中toggle()函数的使用

    今天遇到一个有趣的例子,将它记录下来. 一个一级菜单,里边有一个二级菜单,二级菜单是通过锚点来链接页面元素的.想要实现的效果是当点击锚点时,页面链接到相应锚点,同时二级菜单隐藏,再点击一级菜单时,继续 ...

  3. JQuery hover toggle事件使用

    JQuery hover toggle事件使用: <%@ page language="java" import="java.util.*" pageEn ...

  4. jQuery操作之效果

    jQuery操作之效果 效果操作一共分五类:1.基本,2.滑动,3.淡入淡出,4.自定义,5.设置 show(),hide(),toggle() 代码如下: html代码: <p style=& ...

  5. jQuery Easing 动画效果扩展--使用Easing插件，让你的动画更具美感。

    jQuery  Easing 是一款比较老的jQuery插件,在很多网站都有应用,尤其是在一些页面滚动.幻灯片切换等场景应用比较多.它非常小巧,且有多种动画方案供选择,使用简单,而且免费. 引入Eas ...

  6. 第一百七十二节，jQuery，动画效果

    jQuery,动画效果 学习要点: 1.显示.隐藏 2.滑动.卷动 3.淡入.淡出 4.自定义动画 5.列队动画方法 6.动画相关方法 7.动画全局属性 一．显示.隐藏 jQuery 中显示方法为:. ...

  7. jQuery 收缩展开效果

    <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="Conten ...

  8. js进阶 13-2 jquery动画滑动效果哪些注意事项

    js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...

  9. jquery-12 jquery常用动画效果有哪些

    jquery-12 jquery常用动画效果有哪些 一.总结 一句话总结:jquery可以用户animate()自定义动画,也可以slide和fade系列方法来设置动画. 1.动画效果如何设置执行时间 ...

随机推荐

  1. socket的BeginConnect(EndPoint remoteEP,AsyncCallback callback,objcet state);个人理解

    1.socket.BeginConnect(); 其中的三个参数值EndPoint remoteEP,这个是用来指定连接的socket服务器的的地址 socket参数表 EndPoint remote ...

  2. CPP-网络/通信：WebService

    工具:vc2003 //引入相关头文件,连接动态库,定义全局变量. //***************************************************** #include & ...

  3. Feign-请求不同注册中心的服务

    场景 需要通过Feign Client请求,其他注册中心或者其他Restful服务. 临时方案 Feign 请求转为RestTemplate http请求. 优点:能适应,feign环境和非feign ...

  4. HTML5基础知识习题 一

    1. HTML5 之前的 HTML 版本是什么? 答: HTML 4.01 2. HTML5 的正确 doctype 是? 答: <!DOCTYPE html> 3. 在 HTML5 中, ...

  5. Bzoj 1085: [SCOI2005]骑士精神 (dfs)

    Bzoj 1085: [SCOI2005]骑士精神 题目链接:https://www.lydsy.com/JudgeOnline/problem.php?id=1085 dfs + 剪枝. 剪枝方法: ...

  6. hihoCoder-1098-kruskal

    如果起始点和终止点的父节点相同,就说明它们就已经在同一个连通分量里面,说明,起始点和终止点在此之前就已经被连入同一个分量之中,如果此时还将起始点和终止点连入此分量,就会形成回路,想象一个三角形,你大概 ...

  7. （63）zabbix low-level discover zabbix批量部署必备

    1. 概述 <zabbix发现配置>server通过配置好的规则,自动添加host.group.template <zabbix Active agent自动注册>与disco ...

  8. modprode

    modprobe命令 1.modprobe 命令是根据depmod -a的输出/lib/modules/version/modules.dep来加载全部的所需要模块. 2.删除模块的命令是:modpr ...

  9. 微信小程序登录对接Django后端实现JWT方式验证登录

    先上效果图 点击授权按钮后可以显示部分资料和头像,点击修改资料可以修改部分资料. 流程 1.使用微信小程序登录和获取用户信息Api接口 2.把Api获取的用户资料和code发送给django后端 3. ...

  10. SQL server的GO用法--巨坑

    SQL脚本是一种用SQL语言写的批处理文件(.sql),SQL脚本通常可以由SQL查询分析器来执行. ================================================= ...