Jquery Implementation of hovering the mouse to display the second-level menu effect, floating jquery

Jquery Implementation of hovering the mouse to display the second-level menu effect, floating jquery

1. Layout:

<Div class = "show">  <div class =" drop "style =" display: none; z-index: 80000 "id =" profileMenu "> <ul> <li> <a class =" pass "style =" cursor: pointer "href = '#'> <span> Change Password </span> </a> </li> <a class =" quit "style =" cursor: pointer "href = '#'> <span> exit </span> </a> </li> </ul> </div>

2. js control:

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); }); } 

I wrote a jquery drop-down menu, where the drop-down content displays the content of the mouse hovering in the navigation

JQ can Write Less ).
In addition, there is a problem in writing that way, that is, you can quickly shake a few times back and forth with the cursor on the menu. When you move the light mark, you will find that the drop-down menu is still on it.
Therefore, you must add a stop before the effect.
$ (Function (){
$ ('. Meun'). hover (function () {$ (this). find ('ul '). stop (true, true). slideDown ();},
Function () {$ (this). find ('ul '). stop (true, true). slideUp ('save ');
})
})

JS mouse hover drop-down box menu effect problems

To see the results, you must use a browser to browse the results. In addition, you must introduce the corresponding jquery library.