有时候我们希望实现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. Java-NestedClass(Interface).

    内部类(Nested Class) 内部类:即在一个类中还包含着另外一个类,一般是作为匿名类或者是使用数据隐藏时使用的.例子: //内部类 class Out{ private int age = 1 ...

  2. Android（java）学习笔记145：Handler消息机制的原理和实现

     联合学习 Android 异步消息处理机制 让你深入理解 Looper.Handler.Message三者关系   1. 首先我们通过一个实例案例来引出一个异常: (1)布局文件activity_m ...

  3. elastic-job lite 编程实战经验

    (继续贴一篇之前写的经验案例) elastic-job lite 编程实战经验 其实这是一次失败的项目,虽然最后还是做出来了,但是付出了很大代价.并且需要较深入的踩坑改造elastic-job,导致代 ...

  4. sort函数的使用

    此篇当作自己的笔记(水平太菜,这都一直没搞明白) sort()函数的用法1)sort函数包含在头文件<algroithm>中,还要结合using namespace std2)sort有三 ...

  5. 由DAG到背包问题——记忆化搜索和递推两种解法

    一.问题描述 物品无限的背包问题:有n种物品,每种均有无穷多个.第 i 种物品的体积为Vi,重量为Wi.选一些物品装到一个容量为 C 的背包中,求使得背包内物品总体积不超过C的前提下重量的最大值.1≤ ...

  6. python在d盘，robotframework引入seleniumlibrary报错

    在*** setting*** 中引入库   Library  SeleniumLibrary  报错 unknown seleniumlibrary library ,try to use quic ...

  7. PAT (Advanced Level) Practise - 1096. Consecutive Factors (20)

    http://www.patest.cn/contests/pat-a-practise/1096 Among all the factors of a positive integer N, the ...

  8. javascript 写一个随机范围整数的思路

    const {random} = Math; //返回 [min,max] 的随机值 //[0,1) * (max - min + 1) => [0,max-min+1) //[0,max-mi ...

  9. 长链剖分优化dp三例题

    首先,重链剖分我们有所认识,在dsu on tree和数据结构维护链时我们都用过他的性质. 在这里,我们要介绍一种新的剖分方式,我们求出这个点到子树中的最长链长,这个链长最终从哪个儿子更新而来,那个儿 ...

  10. 【Java_基础】空串、空格串、null的区别

    1.表示的区别 string str1 = "";    //空串      str1.length() 等于 0 string str2 = " ";   / ...