鼠標懸浮顯示二級菜單效果的jquery實現

 1.布局：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <div class="show">  <img src="~/images/head_icon.png" />     <div class="drop" style=" display:none; z-index:80000" id="profileMenu">  <ul>  <li>  <a class="pass" style="cursor: pointer"  href='#'>  <span>修改密碼</span>  </a>  </li>  <li>  <a class="quit" style="cursor: pointer"  href='#'  ><span>退出</span></a>  </li>  </ul>  </div>  </div>

2.js控制：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 function dropMenu(obj) {  $(obj).each(function () {  var theSpan = $(this);  var theMenu = theSpan.find(".drop");  var tarHeight = theMenu.height();  theMenu.css({ height: 0, opacity: 0 });        var t1;        function expand() {  clearTimeout(t1);  //theSpan.find('a').addClass("selected");  theMenu.stop().show().animate({ height: tarHeight, opacity: 1 }, 200);  }        function collapse() {  clearTimeout(t1);  t1 = setTimeout(function () {  // theSpan.find('a').removeClass("selected");  theMenu.stop().animate({ height: 0, opacity: 0 }, 200, function () {  $(this).css({ display: "none" });  });  }, 250);  }        theSpan.hover(expand, collapse);  theMenu.hover(expand, collapse);  });  }