jQuery 关于点击菜单项,使子条目“向上”展开效果的实现
为什么做了这样一个的功能呢?原因是前一段时间jQuery群里有个朋友想实现这样一个东东,大家都知道jQuery中有现成的slideDown和slideUp方法,但那是向下展开,而这个是一个完全相反的效果。
功能展示链接 http://runjs.cn/detail/v6i9g6g0
其实这样一个功能也蛮奇怪的,感觉不是很实用,但是当时也没有一下子做出来,试着写了一会儿觉得不能马上写完就say sorry了。
最近呢又开始接着继续学习jQuery的东西,学到animate动画的时候,自己就在想,是不是可以用来实现一下这个功能呢(这个真是个心结啊~~)?然后就试着写了一下,经过一番波折,不仅让我对animate的使用更加了解之外,也让我了解了一个用jQuery的小技巧,更重要的是,实现这个功能。
下面上代码并做出解析:
Html部分:
<div>
<span>Item1.1</span>
<span>Item1.2</span>
<span>Item1.3</span>
<span>Item1.4</span>
</div>
<div>
<span>Item2.1</span>
<span>Item2.2</span>
<span>Item2.3</span>
<span>Item2.4</span>
</div>
<div>
<span>Item3.1</span>
<span>Item3.2</span>
</div>
<div>
<span>Item4.1</span>
<span>Item4.2</span>
</div>
<div class="menu">
<span>Item1</span>
<span>Item2</span>
<span>Item3</span>
<span>Item4</span>
</div>
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
文档结构是这样子的,大家可以看到menu这个主菜单的菜单项的顺序与子菜单的实际顺序是一致的。这个是为点击菜单项上的条目通过位置查找对应子项做的一个设计。
jQuery部分:
$(function () {
$("div").each(function () {//遍历所有div元素
if ($(this).is("[class='menu']")) {//如果是菜单所在的div
$(this).css({ "top": $(this).height() + $(this).position().top,
"position": "absolute",
"color": "white",
"background-color": "white",
"width": "500px",
"left": "200px"
})//为菜单添加样式
.children("span").css({ "background-color": "DimGrey",
"border": "black solid thin"
})//为菜单项添加样式
.each(function () {//对每个菜单项进行遍历
$(this).click(function () {//添加click事件
var Ind = $("div.menu").children().index(this);//找出当前点击的菜单项是菜单div中的第几个span
var FocusEle = $("div:eq(" + Ind + ")");//将选中菜单项的子项设成一个变量
if ($("div[class*='up']").size() == 0) {//说明是第一次加载,初次的时候为没选中任何菜单项的状态,所以up的个数为0
FocusEle.animate(
{
top: $(this).height() - 10//使对应的子项向上移动
},
'normal',//中速移动
function () {
$(this).addClass("up");//移动完之后为这个子项加上up的样式
});
} else {//如果不是初次加载
$("div[class*='up']").animate(//找到正在显示的菜单子项
{
top: $(this).height() + 10//使对应子项向下移动
},
'normal',
function () {
$(this).removeClass("up");//移除这个子项的up样式
FocusEle.animate(//【一】
{
top: $(this).height() - 10//将重新选中的菜单子项向上移动
},
'normal',
function () {
$(this).addClass("up");//添加up样式
});
})
//***************************特别说明**********************
// .queue(function () {
// FocusEle.animate(
// {
// top: $(this).height() - 10
// },
// 'slow',
// function () {
// $(this).addClass("up");
// });
// });
} }).css("cursor", "pointer").hover(function () {
$(this).css("color", "red");
}, function () {
$(this).css("color", "white");
})
});
}
else {//如果不是菜单所在的div,即菜单子项
var Index = $("div").index(this);
var Left = $("div.menu span:eq(" + Index + ")").position().left + 200;//修改不同子项的横坐标,使其与菜单项的条目一致
$(this).css({ "top": $(this).height() + $(this).position().top,
"left": Left,
"color": "white",
"position": "absolute"
})//为菜单子项添加样式
.children().css({
"background-color": "SlateGrey",
"border": "black solid thin",
"cursor": "pointer"
}).hover(function () {
$(this).css("color", "red");
}, function () {
$(this).css("color", "white");
});
}
})
});
.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }
上面的代码几乎是逐条注释的,大家应该都能看懂,主要的实现思想我还是说一下,大家再结合着注释看就OK了,大家会发现实现这个功能的时候完全没有显示(show()),隐藏(hide())的操作,最开始我也是一个思维误区,以为必须要用显示,隐藏去实现,但做着做着发现了一个非常傻的问题,展开的效果实现上是通过移动隐藏和显示来实现的。怎么说呢,大家想想看完电影之后演员名单那部分的东西就能有个概念了。
这里有两点很重要:
1、这5个div全部为absolute形式的,因为只有这样才能进行相对移动
2、所谓的消失,实际上是4个子项的div被menu div也遮挡住了,所以这里要知道,我给menu div加了背景色,即白色。
说到这大家应该就知道是如何实现的了吧?
另外在说一下注释中”特别说明”的那部分,其实这部分代码与它上面不远处的【一】的代码是一样的,只是前面加了.queue这么东西,这是做什么的呢?就是将多个动画放到一个队列里,然后依据队列的次序,一个一个的展现出来。我的初衷就是,如果当前有子项是展开状态的,那么就“先”把其关闭,“后”把新点击的子项展开。
不过不知道为什么,如果是二次进行了点击的子项,就不会再经过queue 中animate结束时那个function了。这个有明白为什么的朋友可以帮忙解答一下。然而像我【一】中这个实现,也是合乎规则的。
其实这个小功能还有点弊端,就是如果点击过快,大家会发现同时展开多项子菜单,原因是动画的过程是需要时间的,而在这段时间里我没有禁止click事件。应该是用指派命名空间的方法就可以搞定。大家可以研究研究然后告诉我。
最后总结了一下,写这个小功能有点惭愧的说写了挺长时间,中间换了好多方法为解决一些问题,现在看来,这么简单的东西为什么会写这么久,还是因为最开始的时候没有想好,边写边想花费了许多时间。以后要改进这种做事方法。
jQuery 关于点击菜单项,使子条目“向上”展开效果的实现的更多相关文章
- jquery获取点击标签内的子标签内容和值实例
今天有点累了,就不多做其他的描述解释.在插入的代码里相关解释也都有. <!--<%@ page language="java" import="java.ut ...
- IE浏览器右键菜单插件开发(上篇)——自定义一个IE右键菜单项
要做一个IE右键浏览器插件,得3步走. 第一,在IE右键菜单上添加自定义菜单名称,是通过注册表实现的,如下: string regkey = @"Software\Microsoft\Int ...
- 建立CMenu菜单项,实现选中菜单项点击左键响应事件
这里我只是根据自己的项目做了一些总结,实现点击右键弹出菜单项,点左键选择菜单项: CMenu menu; VERIFY(menu.CreatePopupMenu());//新建一个cmenu菜单项 m ...
- JQUERY实现点击INPUT使光标移动到最后或指定位置
下面本文章给大家简单介绍一下JQUERY实现点击INPUT使光标移动到最后或指定位置例子,希望对各位有帮助,你要知道面对一个 处女座的 需求者, focus()是远远不够的,比如说“我点进去的时候光标 ...
- 微信禁用右上角的分享按钮,WeixinJSBridge API以及隐藏分享的子按钮等菜单项
<!--禁用微信分享按钮--> <script> function onBridgeReady() { WeixinJSBridge.call('hideOptionMenu' ...
- Unity 3D编辑器扩展介绍、教程(一) —— 创建菜单项
Unity编辑器扩展教程 本文提供全流程,中文翻译.Chinar坚持将简单的生活方式,带给世人!(拥有更好的阅读体验 -- 高分辨率用户请根据需求调整网页缩放比例) 一 Brief Introduct ...
- [MFC] 对话框菜单项Menu选中打勾(单选,多选)
近期需要实现一个功能:MFC对话框中,一项菜单下有五个菜单项,改变菜单项选中状态,每次只能选择其中一个打勾.(单选) 然后在网上搜了下资料,稍微总结下,以防后面用到. 1.单选实现: CMenu* m ...
- Android简易实战教程--第二十三话《绚丽的菜单项》
转载本博客请注明出处:点击打开链接 http://blog.csdn.net/qq_32059827/article/details/52327456 今天这篇稍微增强点代码量,可能要多花上5分钟喽 ...
- iOS:菜单控制器和菜单项:UIMenuController和UIMenuItem
菜单控制器和菜单项:弹出自定义的菜单栏窗口 提示: 1. Menu所处的View必须实现 – (BOOL)canBecomeFirstResponder, 且返回YES2. Menu所处的View必须 ...
随机推荐
- OneThink实现多图片批量上传功能
OneThink原生系统中的图片上传功能是uploadify.swf插件进行上传的,默认是只能上传一张图片的,但是uploadify.swf是支持多图片批量上传的,那么我们稍加改动就可实现OneThi ...
- 高通/苹果/联发科:手机CPU那些事
如今人们买手机,都比较关心采用了什么CPU,因为CPU直接决定了这台手机的性能,CPU之于手机就好比人的大脑,它是整台手机的控制中枢系统,也是逻辑部分的控制中心.又相当于车的发动机,发动机越强劲,车子 ...
- linux环境变量(转)
转自: http://www.cnblogs.com/growup/archive/2011/07/02/2096142.html Linux 的变量可分为两类:环境变量和本地变量 环境变量 或者称为 ...
- ubuntu10.04共享文件夹
ubuntu10.04共享文件夹 参考http://jingyan.baidu.com/album/9989c746084c70f648ecfe99.html,共享了home文件夹,然后把共享文件夹映 ...
- 寄售Consignment和VMI有什么区别?
Consignment 寄存一般是指卖方把货物存放在买方所属仓库,消耗后结帐.库存水平控制和货物的物理管理都由买方负责.这是目前很多大卖场通行的做法.典型的VMI一般也是指卖方把货物存放在买方附近的仓 ...
- LCS记录路径
还想用hash记录……果然是天真.lcs转移比较简单,每次增加1.每次找是当前-1的就行了. #include <algorithm> #include <iostream> ...
- kafka_2.9.2-0.8.1.1分布式集群搭建代码开发实例
准备3台虚拟机, 系统是RHEL64服务版. 1) 每台机器配置如下:$ cat /etc/hosts # zookeeper hostnames: 192.168.8.182 ...
- jquery常用代码集锦
1. 如何修改jquery默认编码(例如默认GB2312改成 UTF-8 ) 1 2 3 4 5 $.ajaxSetup({ ajaxSettings : { contentT ...
- iOS 开发 中级:UIToolbar,UINavigationBar,UITabBar,UIBarButtonItem,UITabBarItem自定义方法总结
原文: http://blog.csdn.net/songrotek/article/details/8692866?utm_source=tuicool 对于UIToolbar,UINavigat ...
- MYSQL数据库管理之权限管理
经常遇到有网友在QQ群或者论坛上问关于mysql权限的问题,今天抽空总结一下关于这几年使用MYSQL的时候关于MYSQL数据库的权限管理的经验,也希望能对使用mysql的网友有所帮助! 一.MYSQL ...