jQuery实现菜单点击隐藏（上下左右）
canrun
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>jQuery实现菜单点击隐藏</title> 6 <script type="text/javascript" src="http://zjmainstay.cn/jquerylib/jquery-1.6.2.min.js"></script> 7 <script> 8 $(document).ready(function () { 9 //eg.1 10 $('#menu-1').menuToggle({ 11 'ctrlBtn':'ctrl-btn-1', 12 'speed':400, 13 'width':400, 14 }); 15 //eg.2 16 $('#menu-2').menuToggle({ 17 'ctrlBtn':'ctrl-btn-2', 18 'speed':300, 19 'width':400, 20 'openText':'<<展开', 21 'closeText':'关闭>>', 22 }); 23 //eg.3 24 $('#menu-3').menuToggle({ 25 'ctrlBtn':'ctrl-btn-3', 26 'speed':300, 27 'height':400, 28 'openText':'向下展开', 29 'closeText':'关闭', 30 'type':'height', 31 }); 32 33 //eg.4 34 $('#menu-4').menuToggle({ 35 'ctrlBtn':'ctrl-btn-4', 36 'speed':300, 37 'height':400, 38 'openText':'向上展开', 39 'closeText':'关闭', 40 'type':'height', 41 }); 42 }); 43 (function($){ 44 $.fn.extend({'menuToggle': 45 function(options){ 46 //self变量，用于函数内部调用插件参数 47 var self = this; 48 //默认参数 49 this._default = { 50 'ctrlBtn':null, //关闭&展开按钮id 51 'speed':400, //展开速度 52 'width':400, //展开菜单宽度 53 'height':400, //展开菜单高度 54 'openText':'展开>>', //展开前文本 55 'closeText':'<<关闭', //展开后文本 56 'type':'width' //width表示按宽度伸展，height表示按高度伸展 57 }; 58 //插件初始化函数 59 this.init = function(options){ 60 //配置参数格式有误则提示并返回 61 if(typeof options != 'object') { 62 self.error('Options is not object Error!'); 63 return false; 64 } 65 if(typeof options.ctrlBtn == 'undefined') { 66 self.error('Options ctrlBtn should not be empty!'); 67 return false; 68 } 69 //存储自定义参数 70 self._default.ctrlBtn = options.ctrlBtn; 71 if(typeof options.type != 'undefined') self._default.type = options.type; 72 if(typeof options.width != 'undefined') self._default.width = options.width; 73 if(typeof options.height != 'undefined') self._default.height = options.height; 74 if(typeof options.speed != 'undefined') self._default.speed = options.speed; 75 if(typeof options.openText != 'undefined') self._default.openText = options.openText; 76 if(typeof options.closeText != 'undefined') self._default.closeText = options.closeText; 77 if(self._default.type == 'width') { 78 self._default.expandOpen = {width: self._default.width}; 79 self._default.expandClose = {width: 0}; 80 }else { 81 self._default.expandOpen = {height: self._default.height}; 82 self._default.expandClose = {height: 0}; 83 } 84 }; 85 this.run = function(){ 86 $("#"+self._default.ctrlBtn).click(function () { 87 if($(this).hasClass('closed')){ //有closed类，表示已关闭，现在展开 88 $(this).removeClass('closed').html(self._default.closeText); 89 $(self).show().animate(self._default.expandOpen, self._default.speed); 90 }else { 91 $(this).addClass('closed').html(self._default.openText); 92 $(self).animate(self._default.expandClose, self._default.speed,function(){ 93 $(this).hide(); 94 }); 95 } 96 }); 97 }; 98 this.error = function(msg){ 99 //没有错误提示DIV则自动添加 100 if(!$("#menuToggleErrorTips").size()){ 101 $("<div id='menuToggleErrorTips'><h2>Error</h2><div class='tips'></div></div>").appendTo($("body")).hide(); 102 $("#menuToggleErrorTips").css({ 103 position:'absolute', 104 left: $("body").width()/3, 105 top: 100, 106 width:400, 107 height:200, 108 'z-index': 9999999, 109 'border': '1px solid #000', 110 'background-color': '#ABC', 111 'color': '#CC0000', 112 'text-align': 'center' 113 }); 114 } 115 //显示错误提示信息 116 $("#menuToggleErrorTips").show().children('.tips').html(msg); 117 } 118 //Init 119 this.init(options); 120 this.run(); 121 } 122 }); 123 })(jQuery); 124 </script> 125 <style type="text/css"> 126 /* 公用 */ 127 .hide-menu 128 { 129 width:0; 130 height:300px; 131 border:1px solid #333333; 132 background-color:#777788; 133 text-align:center; 134 line-height:400%; 135 font-size:13px; 136 left:0; 137 top:100px; 138 float:left; 139 display:none; 140 } 141 .ctrl-btn{ 142 border: 1px solid; 143 float: left; 144 padding: 10px; 145 position: relative; 146 top: 100px; 147 cursor:pointer; 148 } 149 /* 菜单2 */ 150 #menu-2{ 151 width:400px; 152 top:100px; 153 right:0; 154 float:right; 155 display:block; 156 } 157 #ctrl-btn-2{ 158 float:right; 159 } 160 .clr{ 161 clear:both; 162 } 163 /* 菜单3 */ 164 #menu-3{ 165 width:400px; 166 height:0; 167 } 168 #menu-3-wrapper{ 169 top:0; 170 left:300px; 171 position:absolute; 172 } 173 #ctrl-btn-3{ 174 clear: both; 175 left: 150px; 176 position: relative; 177 top: 0; 178 } 179 /* 菜单4 */ 180 #menu-4{ 181 clear: both; 182 width:400px; 183 height:400px; 184 display:block; 185 } 186 #menu-4-wrapper{ 187 bottom:0; 188 left:300px; 189 position:absolute; 190 } 191 #ctrl-btn-4{ 192 clear: both; 193 left: 150px; 194 position: relative; 195 top: 0; 196 } 197 </style> 198 </head> 199 200 <body> 201 <div id="menu-1" class="hide-menu"></div> 202 <div id="ctrl-btn-1" class="ctrl-btn closed">展开>></div> 203 204 <div id="menu-2" class="hide-menu"></div> 205 <div id="ctrl-btn-2" class="ctrl-btn">关闭>></div> 206 207 <div id="menu-3-wrapper"> 208 <div id="menu-3" class="hide-menu"></div> 209 <div id="ctrl-btn-3" class="ctrl-btn closed">向下展开</div> 210 </div> 211 <div id="menu-4-wrapper"> 212 <div id="ctrl-btn-4" class="ctrl-btn">关闭</div> 213 <div id="menu-4" class="hide-menu"></div> 214 </div> 215 <div class="clr"></div> 216 </body> 217 </html>
