JavaScript Suckerfish Drop-Down Menus，jQuery风格

Posted 2021-05-20

/* 
 jQuery Suckerfish Drop Downs
*/

$(document).ready(function(){
    $("#nav-one li").hover(
        function(){ $("ul", this).fadeIn("fast"); }, 
        function() { } 
    );
    if (document.all) {
        $("#nav-one li").hoverClass ("sfHover");
    }
});

$.fn.hoverClass = function(c) {
    return this.each(function(){
        $(this).hover( 
            function() { $(this).addClass(c);  },
            function() { $(this).removeClass(c); }
        );
    });
};    



/* 
Sample Markup
*/

<ul id="nav-one" class="nav">
			<li>

				<a href="#item1">item 1</a>
				<ul>
					<li><a href="#item1.1">item 1.1</a></li>
					<li><a href="#item1.2">item 1.2</a></li>
					<li><a href="#item1.3">item 1.3</a></li>
					<li><a href="#item1.4">item 1.4</a></li>

				</ul>
			</li>
			<li>
				<a href="#item2">item 2</a>
				<ul>
					<li><a href="#item2.1">item 2.1</a></li>
					<li><a href="#item2.2">item 2.2</a></li>

				</ul>
			</li>
			<li>
				<a href="#item3">item 3</a>
				<ul>
					<li><a href="#item3.1">item 3.1</a></li>
					<li><a href="#item3.2">item 3.2</a></li>

				</ul>
			</li>
			<li>
				<a href="#item4">item 4</a>
				<ul>
					<li><a href="#item4.1">item 4.1</a></li>
					<li><a href="#item4.2">item 4.2</a></li>

					<li><a href="#item4.3">item 4.3</a></li>
				</ul>
			</li>
		</ul>