jQuery实现菜单点击隐藏（上下左右）
canrun
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery实现菜单点击隐藏</title>
<script type="text/javascript" src="http://zjmainstay.cn/jquerylib/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function () {
//eg.1
$('#menu-1').menuToggle({
'ctrlBtn':'ctrl-btn-1',
'speed':400,
'width':400,
});
//eg.2
$('#menu-2').menuToggle({
'ctrlBtn':'ctrl-btn-2',
'speed':300,
'width':400,
'openText':'<<展开',
'closeText':'关闭>>',
});
//eg.3
$('#menu-3').menuToggle({
'ctrlBtn':'ctrl-btn-3',
'speed':300,
'height':400,
'openText':'向下展开',
'closeText':'关闭',
'type':'height',
}); //eg.4
$('#menu-4').menuToggle({
'ctrlBtn':'ctrl-btn-4',
'speed':300,
'height':400,
'openText':'向上展开',
'closeText':'关闭',
'type':'height',
});
});
(function($){
$.fn.extend({'menuToggle':
function(options){
//self变量，用于函数内部调用插件参数
var self = this;
//默认参数
this._default = {
'ctrlBtn':null, //关闭&展开按钮id
'speed':400, //展开速度
'width':400, //展开菜单宽度
'height':400, //展开菜单高度
'openText':'展开>>', //展开前文本
'closeText':'<<关闭', //展开后文本
'type':'width' //width表示按宽度伸展，height表示按高度伸展
};
//插件初始化函数
this.init = function(options){
//配置参数格式有误则提示并返回
if(typeof options != 'object') {
self.error('Options is not object Error!');
return false;
}
if(typeof options.ctrlBtn == 'undefined') {
self.error('Options ctrlBtn should not be empty!');
return false;
}
//存储自定义参数
self._default.ctrlBtn = options.ctrlBtn;
if(typeof options.type != 'undefined') self._default.type = options.type;
if(typeof options.width != 'undefined') self._default.width = options.width;
if(typeof options.height != 'undefined') self._default.height = options.height;
if(typeof options.speed != 'undefined') self._default.speed = options.speed;
if(typeof options.openText != 'undefined') self._default.openText = options.openText;
if(typeof options.closeText != 'undefined') self._default.closeText = options.closeText;
if(self._default.type == 'width') {
self._default.expandOpen = {width: self._default.width};
self._default.expandClose = {width: 0};
}else {
self._default.expandOpen = {height: self._default.height};
self._default.expandClose = {height: 0};
}
};
this.run = function(){
$("#"+self._default.ctrlBtn).click(function () {
if($(this).hasClass('closed')){ //有closed类，表示已关闭，现在展开
$(this).removeClass('closed').html(self._default.closeText);
$(self).show().animate(self._default.expandOpen, self._default.speed);
}else {
$(this).addClass('closed').html(self._default.openText);
$(self).animate(self._default.expandClose, self._default.speed,function(){
$(this).hide();
});
}
});
};
this.error = function(msg){
//没有错误提示DIV则自动添加
if(!$("#menuToggleErrorTips").size()){
$("<div id='menuToggleErrorTips'><h2>Error</h2><div class='tips'></div></div>").appendTo($("body")).hide();
$("#menuToggleErrorTips").css({
position:'absolute',
left: $("body").width()/3,
top: 100,
width:400,
height:200,
'z-index': 9999999,
'border': '1px solid #000',
'background-color': '#ABC',
'color': '#CC0000',
'text-align': 'center'
});
}
//显示错误提示信息
$("#menuToggleErrorTips").show().children('.tips').html(msg);
}
//Init
this.init(options);
this.run();
}
});
})(jQuery);
</script>
<style type="text/css">
/* 公用 */
.hide-menu
{
width:0;
height:300px;
border:1px solid #333333;
background-color:#777788;
text-align:center;
line-height:400%;
font-size:13px;
left:0;
top:100px;
float:left;
display:none;
}
.ctrl-btn{
border: 1px solid;
float: left;
padding: 10px;
position: relative;
top: 100px;
cursor:pointer;
}
/* 菜单2 */
#menu-2{
width:400px;
top:100px;
right:0;
float:right;
display:block;
}
#ctrl-btn-2{
float:right;
}
.clr{
clear:both;
}
/* 菜单3 */
#menu-3{
width:400px;
height:0;
}
#menu-3-wrapper{
top:0;
left:300px;
position:absolute;
}
#ctrl-btn-3{
clear: both;
left: 150px;
position: relative;
top: 0;
}
/* 菜单4 */
#menu-4{
clear: both;
width:400px;
height:400px;
display:block;
}
#menu-4-wrapper{
bottom:0;
left:300px;
position:absolute;
}
#ctrl-btn-4{
clear: both;
left: 150px;
position: relative;
top: 0;
}
</style>
</head> <body>
<div id="menu-1" class="hide-menu"></div>
<div id="ctrl-btn-1" class="ctrl-btn closed">展开>></div> <div id="menu-2" class="hide-menu"></div>
<div id="ctrl-btn-2" class="ctrl-btn">关闭>></div> <div id="menu-3-wrapper">
<div id="menu-3" class="hide-menu"></div>
<div id="ctrl-btn-3" class="ctrl-btn closed">向下展开</div>
</div>
<div id="menu-4-wrapper">
<div id="ctrl-btn-4" class="ctrl-btn">关闭</div>
<div id="menu-4" class="hide-menu"></div>
</div>
<div class="clr"></div>
</body>
</html>
jQuery实现菜单点击隐藏（上下左右）的更多相关文章
- [转]JQuery控制div外点击隐藏，div内点击不会隐藏
一直弄清楚这个效果如何实现,看了这篇博客的几行代码原来如此简单,就是利用了事件冒泡而已. 比如有个div其id为body,实现在div外点击隐藏,div内点击不隐藏,采用jQuery实现如下: $(& ...
- HTML实用案例（1）—— 左侧菜单，右侧内容的布局（带左侧菜单点击隐藏显示效果）
效果图 代码部分 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" ...
- 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开，在页面的列表中有若干项，列表的每项中有一个二级列表，二级列表默认为隐藏状态。点击列表的项，切换二级列表的显示或隐藏状态
查看本章节 查看作业目录 需求说明: 使用jQuery 中的显示与隐藏动画效果实现折叠下拉菜单的收缩和展开,在页面的列表中有若干项,列表的每项中有一个二级列表,二级列表默认为隐藏状态.点击列表的项,切 ...
- jQuery 二级菜单，一次显示一个小类 鼠标点击显示小类
jQuery 二级菜单,一次显示一个小类 鼠标点击显示小类 本例有另外2个关联案例,演示地址分别为2.php,3.php 演示 XML/HTML Code <div class="ar ...
- js进阶 12-15 jquery如何实现点击button显示列表，点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- 几款jQuery右键菜单插件介绍
在网页中使用自定义右键菜单,实现上皆为使用javascript禁用浏览器默认的右键菜单,然后在网页中响应鼠标右键事件,弹出自定义的菜单. 类似右键菜单的组件网上很多.一般而言,改变浏览器的默认菜单应当 ...
- Ajax json jquery实现菜单案例
需求: 运用AJAX请求文件menu.json,配置菜单栏,并实现以下功能点: 1. 点击向左箭头,菜单向左移动,隐藏 2. 点击向右箭头,菜单向右移动,显示3. 点击一级菜单,被点击菜单的子菜单显示 ...
- jquery右键菜单
点击这里体验效果 如果要屏蔽页面原来的右键菜单,请设置disable_native_context_menu:true 以下是源代码: <!DOCTYPE html> <html&g ...
- Smint – 用于单页网站制作的 jQuery 导航菜单插件
Smint 是一款用于实现单页风格网站的 jQuery 导航插件,包含两部分:固定在页面顶部的精美导航条和能够在你点击的时候自动滚动到对应内容的菜单按钮.Smint 使用非常简单,只有一个参数用于设置 ...
随机推荐
- 安卓-PC-Arduino3方通信实现
请仔细理解相关参数,如端口设置.IP设置.COM口设置......等等.....不要盲目COPY.....这涉及手机.电脑和一个单片机,其中一台电脑作为服务器并与单片机相连,负责通过网络与客户端通信( ...
- IIS7.5 发布程序后cookie丢失问题
给客户部署网站程序时,发现网站的用户登录不了系统,就是跳转不到另外一个页面,一直保留在当前的页面.在本地的VS里面调试的时候是正常的,算在本地的IIS上发布了一下,测试也是这个问题. -------- ...
- paip. 调试技术打印堆栈 uapi print stack java php python 总结.
paip. 调试技术打印堆栈 uapi print stack java php python 总结. 作者Attilax 艾龙, EMAIL:1466519819@qq.com 来源:attil ...
- 修改Oracle并行度的方法
Oracle并行度默认为1,适当修改并行度对提高性能有很大帮助 1.查看并行度 select table_name,degree from user_tables; --并行度按照用户表分别设置 2. ...
- 已知2个一维数组：a[]={3,4,5,6,7}，b[]={1,2,3,4,5,6,7}；把数组a与数组b 对应的元素乘积再赋值给数组b，如：b[2]=a[2]*b[2]；最后输出数组b的元素。
package hanqi; import java.util.Scanner; public class Test7 { public static void main(String[] args) ...
- c++ string 和wstring 之间的互相转换函数
#include <string> std::string ws2s(const std::wstring& ws) { std::string curLocale = setlo ...
- 部分设备在微信内无法播放audio的解决方案
临时接到一个紧急的需求,一个活动页面,在某台iPhone 5S设备上无法播放音频,其它设备均正常.我接到这个任务时,也是一脸懵逼,试过在audio标签上添加controls属性来显示audio,结果发 ...
- Javascript：常用函数封装
//cookie function setCookie(name, value, iDay) { if(iDay!==false) { var oDate=new Date(); oDate.setD ...
- 安装Weblogic12.1.3时遇到jre1.7.0_71不是有效的 JDK
解决方案:把fmw_12.1.3.0.0_wls.jar放到%JAVA_HOME%\bin目录下,然后执行java -jar fmw_12.1.3.0.0_wls.jar就能安装了.
- FTP客户端上传下载Demo实现
1.第一次感觉MS也有这么难用的MFC类: 2.CFtpFileFind类只能实例化一个,多个实例同时查找会出错(因此下载时不能递归),采用队列存储目录再依次下载: 3.本程序支持文件夹嵌套上传下载: ...