JQUERY教程

当前位置: HTML5技术网 > JQUERY教程 > jQuery 关于点击菜单项,使子条目“向上”展开效果的实现

jQuery 关于点击菜单项,使子条目“向上”展开效果的实现

         为什么做了这样一个的功能呢?原因是前一段时间jQuery群里有个朋友想实现这样一个东东,大家都知道jQuery中有现成的slideDown和slideUp方法,但那是向下展开,而这个是一个完全相反的效果。
         功能展示链接 http://runjs.cn/detail/v6i9g6g0
         其实这样一个功能也蛮奇怪的,感觉不是很实用,但是当时也没有一下子做出来,试着写了一会儿觉得不能马上写完就say sorry了。
        最近呢又开始接着继续学习jQuery的东西,学到animate动画的时候,自己就在想,是不是可以用来实现一下这个功能呢(这个真是个心结啊~~)?然后就试着写了一下,经过一番波折,不仅让我对animate的使用更加了解之外,也让我了解了一个用jQuery的小技巧,更重要的是,实现这个功能。


下面上代码并做出解析:


Html部分:


  1. <div>
  2.         <span>Item1.1</span>
  3.         <span>Item1.2</span>
  4.         <span>Item1.3</span>
  5.         <span>Item1.4</span>
  6.     </div>
  7.     <div>
  8.         <span>Item2.1</span>
  9.         <span>Item2.2</span>
  10.         <span>Item2.3</span>
  11.         <span>Item2.4</span>
  12.     </div>
  13.     <div>
  14.         <span>Item3.1</span>
  15.         <span>Item3.2</span>
  16.     </div>
  17.     <div>
  18.         <span>Item4.1</span>
  19.         <span>Item4.2</span>
  20.     </div>
  21.     <div class="menu">
  22.         <span>Item1</span>
  23.         <span>Item2</span>
  24.         <span>Item3</span>
  25.         <span>Item4</span>
  26.     </div>
复制代码

       文档结构是这样子的,大家可以看到menu这个主菜单的菜单项的顺序与子菜单的实际顺序是一致的。这个是为点击菜单项上的条目通过位置查找对应子项做的一个设计。


jQuery部分:


  1. $(function () {
  2.             $("div").each(function () {//遍历所有div元素
  3.                 if ($(this).is("[class='menu']")) {//如果是菜单所在的div
  4.                     $(this).css({ "top": $(this).height() + $(this).position().top,
  5.                         "position": "absolute",
  6.                         "color": "white",
  7.                         "background-color": "white",
  8.                         "width": "500px",
  9.                         "left": "200px"
  10.                     })//为菜单添加样式
  11.                     .children("span").css({ "background-color": "DimGrey",
  12.                         "border": "black solid thin"
  13.                     })//为菜单项添加样式
  14.                     .each(function () {//对每个菜单项进行遍历
  15.                         $(this).click(function () {//添加click事件
  16.                             var Ind = $("div.menu").children().index(this);//找出当前点击的菜单项是菜单div中的第几个span
  17.                             var FocusEle = $("div:eq(" + Ind + ")");//将选中菜单项的子项设成一个变量
  18.                             if ($("div[class*='up']").size() == 0) {//说明是第一次加载,初次的时候为没选中任何菜单项的状态,所以up的个数为0
  19.                                 FocusEle.animate(
  20.                                 {
  21.                                     top: $(this).height() - 10//使对应的子项向上移动
  22.                                 },
  23.                                 'normal',//中速移动
  24.                                 function () {
  25.                                     $(this).addClass("up");//移动完之后为这个子项加上up的样式
  26.                                 });
  27.                             } else {//如果不是初次加载
  28.                                 $("div[class*='up']").animate(//找到正在显示的菜单子项
  29.                                 {
  30.                                     top: $(this).height() + 10//使对应子项向下移动
  31.                                 },
  32.                                 'normal',
  33.                                 function () {
  34.                                     $(this).removeClass("up");//移除这个子项的up样式
  35.                                     FocusEle.animate(//【一】
  36.                                     {
  37.                                         top: $(this).height() - 10//将重新选中的菜单子项向上移动
  38.                                     },
  39.                                     'normal',
  40.                                     function () {
  41.                                         $(this).addClass("up");//添加up样式
  42.                                     });
  43.                                 })
  44.                                 //***************************特别说明**********************
  45. //                                .queue(function () {
  46. //                                    FocusEle.animate(
  47. //                                    {
  48. //                                        top: $(this).height() - 10
  49. //                                    },
  50. //                                    'slow',
  51. //                                    function () {
  52. //                                        $(this).addClass("up");
  53. //                                    });
  54. //                                });
  55.                             }

  56.                         }).css("cursor", "pointer").hover(function () {
  57.                             $(this).css("color", "red");
  58.                         }, function () {
  59.                             $(this).css("color", "white");
  60.                         })
  61.                     });
  62.                 }
  63.                 else {//如果不是菜单所在的div,即菜单子项
  64.                     var Index = $("div").index(this);
  65.                     var Left = $("div.menu span:eq(" + Index + ")").position().left + 200;//修改不同子项的横坐标,使其与菜单项的条目一致
  66.                     $(this).css({ "top": $(this).height() + $(this).position().top,
  67.                         "left": Left,
  68.                         "color": "white",
  69.                         "position": "absolute"
  70.                     })//为菜单子项添加样式
  71.                     .children().css({
  72.                         "background-color": "SlateGrey",
  73.                         "border": "black solid thin",
  74.                         "cursor": "pointer"
  75.                     }).hover(function () {
  76.                         $(this).css("color", "red");
  77.                     }, function () {
  78.                         $(this).css("color", "white");
  79.                     });
  80.                 }
  81.             })
  82.         });
复制代码

       上面的代码几乎是逐条注释的,大家应该都能看懂,主要的实现思想我还是说一下,大家再结合着注释看就OK了,大家会发现实现这个功能的时候完全没有显示(show()),隐藏(hide())的操作,最开始我也是一个思维误区,以为必须要用显示,隐藏去实现,但做着做着发现了一个非常傻的问题,展开的效果实现上是通过移动隐藏和显示来实现的。怎么说呢,大家想想看完电影之后演员名单那部分的东西就能有个概念了。


这里有两点很重要:


1、这5个div全部为absolute形式的,因为只有这样才能进行相对移动


2、所谓的消失,实际上是4个子项的div被menu div也遮挡住了,所以这里要知道,我给menu div加了背景色,即白色。


说到这大家应该就知道是如何实现的了吧?


       另外在说一**释中”特别说明”的那部分,其实这部分代码与它上面不远处的【一】的代码是一样的,只是前面加了.queue这么东西,这是做什么的呢?就是将多个动画放到一个队列里,然后依据队列的次序,一个一个的展现出来。我的初衷就是,如果当前有子项是展开状态的,那么就“先”把其关闭,“后”把新点击的子项展开。


       不过不知道为什么,如果是二次进行了点击的子项,就不会再经过queue 中animate结束时那个function了。这个有明白为什么的朋友可以帮忙解答一下。然而像我【一】中这个实现,也是合乎规则的。


       其实这个小功能还有点弊端,就是如果点击过快,大家会发现同时展开多项子菜单,原因是动画的过程是需要时间的,而在这段时间里我没有禁止click事件。应该是用指派命名空间的方法就可以搞定。大家可以研究研究然后告诉我。


       最后总结了一下,写这个小功能有点惭愧的说写了挺长时间,中间换了好多方法为解决一些问题,现在看来,这么简单的东西为什么会写这么久,还是因为最开始的时候没有想好,边写边想花费了许多时间。以后要改进这种做事方法。




【jQuery 关于点击菜单项,使子条目“向上”展开效果的实现】相关文章

1. jQuery 关于点击菜单项,使子条目“向上”展开效果的实现

2. jQuery手风琴式相册图片展开效果

3. CSS渐变色效果的实现方法与效果演示

4. jQuery炫酷点击变形全屏放大的模态窗口

5. Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

6. Jquery+CSS3实现一款简洁大气带滑动效果的弹出层

7. 轻松实现元素固定效果的 jQuery 插件

8. jQuery/CSS3实现拼图效果的相册插件

9. 轻松实现元素固定效果的 jQuery 插件

10. 忘掉jQuery,使用JavaScript原生API

本文来源:https://www.51html5.com/a1295.html

点击展开全部

﹝jQuery 关于点击菜单项,使子条目“向上”展开效果的实现﹞相关内容

「jQuery 关于点击菜单项,使子条目“向上”展开效果的实现」相关专题

其它栏目

也许您还喜欢