手动实现jQuery的toggle()效果

有时候我们希望实现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()效果

最新文章

热门文章