手动实现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 显示与隐藏查询条件*********************/

 

posted @ 2017-10-15 20:16  QiaoZhi  阅读(2037)  评论(0)  编辑  收藏  举报