jQuery官网一个关于菜单的例子

标签：blog   show   class   false   tps   ase   log   res   pre   

来源地址：https://my.oschina.net/xngiser/blog/28323

<ul id="menu">
    <li class="menu">Sub 1
        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
        </ul>
    </li>
    <li class="menu">Sub 2
        <ul>
            <li>test 1</li>
            <li>test 2</li>
            <li>test 3</li>
            <li>test 4</li>
        </ul>
    </li>
</ul>

$(document).ready(function() {
var toggle = function(direction, display) {
return function() {
var self = this;
var ul = $("ul", this);
if( ul.css("display") == display && !self["block" + direction] ) {
self["block" + direction] = true;
ul["slide" + direction]("slow", function() {
self["block" + direction] = false;
});
}
};
}
$("li.menu").hover(toggle("Down", "none"), toggle("Up", "block"));
$("li.menu ul").hide();
});
$(document).ready(function() {

$("#menu li ul").hide();

$("#menu li").hover(
function () {
$(this).children("ul").show("slow");
},function(){
$(this).children("ul").hide("slow");
});//hover

});// document ready

In the previous example, please use js to hide the menu (the first line) if your menu requires js. If some one doesn‘t have js turned on they can still get to your content. Also note you can change the show/hide to any old jQuery effect and use "slow" and "fast" to 

jQuery官网一个关于菜单的例子

标签：blog   show   class   false   tps   ase   log   res   pre   

原文地址：http://www.cnblogs.com/mhxy13867806343/p/6219034.html