有时候我们希望实现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. Vue v-if与v-show的区别

    用了 viewjs  预览图片的时候 发现 用着两个 还是有区别的, 相同点==== v-if与v-show都可以动态控制dom元素显示隐藏 不同点 = ====v-if显示隐藏是将dom元素整个添加 ...

  2. 高精度A+B

    #include<stdio.h> #include<string.h> int main() { int lenth1,lenth2,n,i,j,k,s; scanf(&qu ...

  3. spring源码学习之容器的基本实现

    最近想拿出一部分时间来学习一下spring的源码,还特意买了一本书结合来看,当然主要是学习并跟着作者的思路来踏上学习spring的源码的道路,特意在此记录一下,<spring源码深度解析> ...

  4. eclips配置

    新建空workspace import... configMathod:main:project:eFT-Debug@eFTSlnC/C++ Aplication /media/B/testspa2. ...

  5. javase(6)_异常

    一.异常的概念 1.java异常是Java提供的用于处理程序中错误的一种机制. 2.所谓错误是程序在运行过程中发生的一些异常事件(如:除0,数组下标越界,文件不存在等). 3.Java程序的执行过程中 ...

  6. ios之UITabelViewCell的自定义（xib实现2）

    上篇文章介绍了如何用UITableView显示表格,并讲了几种UITableViewCell的风格.不过有时候我们需要自己定义 UITableViewCell的风格,其实就是向行中添加子视图.添加子视 ...

  7. CentOS7写汇编并编译运行汇编代码

    1.下载nasm编译器 下载地址是https://www.nasm.us/pub/nasm/releasebuilds/ wget https://www.nasm.us/pub/nasm/relea ...

  8. Redis数据库（二）

    1. Redis数据库持久化 redis提供了两种数据备份方式,一种是RDB,另外一种是AOF,以下将详细介绍这两种备份策略. 面试: 1.1  配置文件详解备份方式 [root@localhost ...

  9. LeetCode（150） Evaluate Reverse Polish Notation

    题目 Evaluate the value of an arithmetic expression in Reverse Polish Notation. Valid operators are +, ...

  10. PAT Basic 1034

    1034 有理数四则运算 本题要求编写程序,计算2个有理数的和.差.积.商. 输入格式: 输入在一行中按照“a1/b1 a2/b2”的格式给出两个分数形式的有理数,其中分子和分母全是整型范围内的整数, ...