有时候我们希望实现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. spark 的RDD各种转换和动作

    今天先把spark的各种基本转换和动作总结下,以后有时间把各种用法放上去. 1 RDD基本转换操作    map.flagMap.distinct coalesce.repartition coale ...

  2. MIPS程序设计实例

    第一题:用系统功能调用实现简单输入输出 题目要求 利用系统功能调用从键盘输入,转换后在屏幕上显示,具体要求如下: 1.如果输入的是字母(A~Z,区分大小写)或数字(0~9),则将其转换成对应的英文单词 ...

  3. 怎么在webstorm中设置代码模板

    大家都知道webstorm对程序员来说是一个很好用的IDE.我们输入几个关键字,webstorm就会给出提示,大大提高了我们的开发效率,可有时候webstorm的默认设置不能满足我们的个性化代码模板的 ...

  4. ZendStudio 常用快捷键大全

    应用场景 快捷键 功能 查看快捷键 ctrl+shift+l 显示所有快捷键列表 查看和修改快捷键   打开Window->Preferences->General->keys 修改 ...

  5. python基本排序算法（一）

    一.冒泡排序 这个算法的名字由来是因为越大的元素会经由交换慢慢“浮”到数列的顶端(升序或降序排列),就如同碳酸饮料中二氧化碳的气泡最终会上浮到顶端一样,故名“冒泡排序”. 冒泡排序算法的原理如下: 比 ...

  6. a标签目标链接问题

    1.先确定开始文件和目标文件,例如从css.html开始到body.html 2.确定文件寻找路径,因为css.html的父目录是css,而body.html在body目录下,所以需要先退到上一目录h ...

  7. fossil 代理设置

    C:\>fossil user new Joe C:\>fossil user default Joe 设置账户 fossil setting proxy http://-:-fossil ...

  8. Python 入门基础

    第一章 计算机基础 1.1 硬件 CPU:处理和运算 内存:临时存储数据 硬盘:永久存储系统 操作系统:是一个软件(特殊), 调度每个硬件之间的数据传输 1.2 操作系统 Windows:xp/7/8 ...

  9. ViewController的lifecycle和autolayout

  10. dubbo---------timeout与retires

    相信很多人都见过这张图,这张图说明了提供者与消费者之间的关系,下面就介绍一下这个图是什么意思. 1.角色解释: Provider: 暴露服务的服务提供者. Consumer: 调用远程服务的服务消费者 ...