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


为什么做了这样一个的功能呢?原因是前一段时间jQuery群里有个朋友想实现这样一个东东,大家都知道jQuery中有现成的slideDown和slideUp方法,但那是向下展开,而这个是一...
         为什么做了这样一个的功能呢?原因是前一段时间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 () {//对每个菜单项进行遍历
标签: jQuery