;(function ($) {
//局部性的
/*$.fn.extend({
‘nav‘ : function (color) {
$(this).find(‘.nav‘).css({
‘list-style‘ : ‘none‘,
‘margin‘ : 0,
‘padding‘ : 0,
‘display‘ : ‘none‘,
‘color‘ : color
});
$(this).find(‘.nav‘).parent().hover(function () {
$(this).find(‘.nav‘).slideDown(‘normal‘);
}, function () {
$(this).find(‘.nav‘).stop().slideUp(‘normal‘);
});
return this;
}
});
*/
//全局性的
$.extend({
‘nav‘:function(color){
$(‘.nav‘).css({
‘list-style‘:‘none‘,
‘margin‘:0,
‘padding‘:0,
‘display‘:‘none‘,
‘color‘:color
});
$(‘.nav‘).parent().hover(function() {
$(this).find(‘.nav‘).slideDown(‘normal‘);
},function(){
$(this).find(‘.nav‘).stop().slideUp(‘normal‘);
});
return this;
}
});
})(jQuery);
$(function () {
//alert($(‘.list‘).eq(0).nav(‘orange‘));
/*$(‘.nav‘).css({
‘list-style‘:‘none‘,
‘margin‘:0,
‘padding‘:0,
‘display‘:‘none‘
});
$(‘.nav‘).parent().hover(function() {
$(this).find(‘.nav‘).slideDown(‘normal‘);
},function(){
$(this).find(‘.nav‘).stop().slideUp(‘normal‘);
});*/
//全局性的
$.nav(‘orange‘);
//局部性的
//$(‘.list‘).eq(0).nav();
});
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>插件</title> <script type="text/javascript" src="jquery-1.10.1.js"></script> <script type="text/javascript" src="jquery.nav.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" href="style.css" type="text/css" /> </head> <body> <!--<ul class="list"> <li>导航列表 <ul class="nav"> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>导航列表3</li> <li>导航列表3</li> <li>导航列表3</li> <li>导航列表3</li> <li>导航列表3</li> <li>导航列表3</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>导航列表4</li> <li>导航列表4</li> <li>导航列表4</li> <li>导航列表4</li> <li>导航列表4</li> <li>导航列表4</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>导航列表5</li> <li>导航列表5</li> <li>导航列表5</li> <li>导航列表5</li> <li>导航列表5</li> <li>导航列表5</li> </ul> </li> </ul> <p>1</p><p>1</p> <ul class="list"> <li>导航列表 <ul class="nav"> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> </ul> </li> </ul> --> <ul class="list"> <li>导航列表 <ul class="nav"> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>导航列表3</li> <li>导航列表3</li> <li>导航列表3</li> <li>导航列表3</li> <li>导航列表3</li> <li>导航列表3</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>导航列表4</li> <li>导航列表4</li> <li>导航列表4</li> <li>导航列表4</li> <li>导航列表4</li> <li>导航列表4</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>导航列表5</li> <li>导航列表5</li> <li>导航列表5</li> <li>导航列表5</li> <li>导航列表5</li> <li>导航列表5</li> </ul> </li> </ul> <!--<p>1</p><p>1</p> <ul class="list"> <li>导航列表 <ul class="nav"> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> <li>导航列表1</li> </ul> </li> <li>导航列表 <ul class="nav"> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> <li>导航列表2</li> </ul> </li> </ul>--> </body> </html>
原文：http://www.cnblogs.com/xiaoduc-org/p/5046483.html