有时候我们希望实现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 显示与隐藏查询条件*********************/