jquery下拉菜单插件，jquery下拉菜单点击事件
大家好，今天给各位分享jquery下拉菜单插件的一些知识，其中也会对jquery下拉菜单点击事件进行解释，文章篇幅可能偏长，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在就马上开始吧！
如何创建一个自定义jquery插件
jQuery库是专为加快 JavaScript开发速度而设计的。通过简化编写 JavaScript的方式，减少代码量。使用
jQuery库时，您可能会发现您经常为一些常用函数重写相同的代码。如果这样的话，这可能就是您需要编写自定义 jQuery插件的一个原因。
jQuery插件允许您使用自定义代码扩展 jQuery库；您可以对一些重复性函数使用插件。例如，很多插件可供幻灯片、下拉菜单和折叠菜单所用。如果您搜索 jQuery插件，就会发现有大量可用于自己项目的示例（看看它们是如何构建的）。
准备工作
对JavaScript、jQuery和CSS有一个基本了解。（用到的源代码及示例在本文最下方）
开始
jQuery是一个可扩展 JavaScript语言的库。当您创建一个 jQuery插件时，本质上是在扩展这个 jQuery
库。要真正了解插件如何扩展 jQuery库需要对 JavaScript prototype属性有一个基本了解。尽管不直接使用，但是
JavaScript prototype属性可通过 jQuery属性 fn在后台使用，这是原生 JavaScript prototype
属性的一个 jQuery别名。
要使用 fn属性创建一个新 jQuery插件，只需要为 fn属性分配一个插件名，并将其指向一个充当构造函数的新函数，类似于纯
JavaScript。Code 1显示了如何定义一个名为 accordion的新 jQuery插件，其方法是通过使用 jQuery对象和
fn属性，并将其分配给一个新的构造函数。
Code 1：定义一个名为 accordion的新 jQuery插件
jQuery.fn.accordion= function(){
//在这里添加插件代码
};
Code 1展示了创建 jQuery插件的一种方法；该示例没有什么功能性错误。但是，创建一个 jQuery
插件所推荐的方法是，先创建一个允许使用美元符号($)的包装器函数。在默认情况下，美元符号可能与其他 JavaScript
框架发生冲突，如果将插件包装在一个函数中，就不会出现冲突。Code 2中的示例代码显示如何将一个包装器函数应用到一个 jQuery
插件定义中。
(function($){
$.fn.accordion= function(){
//在这里添加插件代码
};
})(jQuery);
在Code 2中，jQuery关键字被应用到包装器函数中，这允许您在插件中使用美元符号，就像使用 fn
属性时那样。包装器函数就绪后，就可以在整个插件的任何地方使用美元符号代替 jQuery
关键字，不会干扰其他第三方插件。该选项提供了一种方法使我们可以在开发整个插件中编写较少的代码，并且有助于您的插件代码保持整洁，易于维护。
维护链接性
jQuery的一个优势是允许您使用任何类型的选择器。但是，必须记住，您的插件可以处理几种不同的元素类型。使用 this
关键字允许您的插件应用于相关函数，通过循环实现每个元素的访问，而不考虑元素类型。如果在 each循环前使用 return
关键字，就可以使用您的插件维护链接性。清单 3显示了分配给一个函数处理程序且与 return关键字相结合的 each循环。
code 3.在 each循环之前使用 return关键字
(function($){
$.fn.accordion= function(){
return this.each(function(){
//使用 return
});
};
})(jQuery);
有了Code 3的代码后，示例 accordion插件可用在一个方法调用链中。有了链接性（另一个强大的 jQuery
特性），您的插件就可用在一个方法调用链中。例如，下面的代码显示了如何淡出 HTML元素，并在单一的方法调用链中将其从文档对象模型(DOM)
中删除。
$("#my-div").fadeOut().remove();
构造一个 accordion
一个典型的层叠设计包括标题栏和相关内容区域。定义列表是一个可供 accordions使用的很好的 HTML结构；dt元素供标题所用，而dd元素供内容区域所用。清单 4中的 HTML结构是一个定义列表，含有四个标题以及相应的内容区域。
Code 4.单一方法调用链
<dl class="accordion" id="my-accordion">
<dt>第1部分</dt>
<dd>内容一</dd>
<dt>第2部分</dt>
<dd>内容二</dd>
<dt>第3部分</dt>
<dd>内容三</dd>
<dt>第4部分</dt>
<dd>内容四</dd>
</dl>
Code 4中定义的列表也有一个分配给它的名为 accordion的 CSS类。没有应用任何 CSS，这个 accordion结构看起来类似于图 1中的基础设计
为了美观，我们再给Code 4中的Html美化一下，并命名为“jquery.accordion.css”
Code 5. CSS部分
.accordion{
width: 500px;
border: 1px solid#ccc;
border-bottom: none;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
}
.accordion dt,
.accordion dd{
border-bottom: 1px solid#ccc;
margin: 0px;
}
.accordion dt{
background:#eaeaea;
cursor: pointer;
padding: 8px 4px;
font-size: 13px;
font-weight: bold;
}
.accordion dd{
padding: 12px 8px;
}
效果如下图：
自定义插件
要制作一个功能性 accordion，必须将自定义代码应用到您上一小节创建 jQuery插件的函数。accordion
插件从遍历所有已定义的 accordion开始。要定义一个 accordion，在 HTML文档或外部嵌入式 JavaScript
文件中使用下列 jQuery。
$('dl#my-accordion').accordion();
对于每个 Accordion，您可以使用 jQuery的 children方法访问相关定义的标题，返回一个数组或 dt元素。应用一个
click事件到 dt元素，然后一个名为 reset方法应用到每个 dt。accordion首次加载时，该 reset方法会折叠所有
dd元素。单击 dt元素或者标题栏时，click事件会触发一个名为 onClick的自定义方法。自定义 onClick方法用于查找
accordion中的所有 dt元素。它调用一个自定义 hide方法，该方法通过使用 next方法找到紧挨着 dt元素的 dd
元素，隐藏每个相关的 dd元素，通过使用 next方法找到紧挨着 dt元素的 dd元素，然后向上滑动激活它。
所有 dd元素被隐藏后，使用 slideDown方法，就可以看见与单击过的 dt元素相关的 dd元素，并创建一个放大和收缩动画，如清单 8
所示。onClick方法的最后一行代码是 return false，确保任何被点击的主题栏没有显现出其一般行为。例如，如果您使用一个
anchor元素作为标题栏，您可能想要执行 return false，这样就不会将用户定向到另一个页面或现有页面的一部分。
Code 6.自定义用于创建一个 jQuery插件的 accordion函数
(function($){
$.fn.accordion= function(options){
return this.each(function(){
var dts=$(this).children('dt');
dts.click(onClick);
dts.each(reset);
});
function onClick(){
$(this).siblings('dt').each(hide);
$(this).next().slideDown('fast');
return false;
}
function hide(){
$(this).next().slideUp('fast');
}
function reset(){
$(this).next().hide();
}
}
})(jQuery);
如果该 accordion插件与一个 HTML定义列表结构相关联时，比如您之前创建的那个 accordion函数将被应用。有了
accordion函数，单击一个标题栏或 dt元素时，会打开其内容区域，而其他内容区域则关闭。换句话说，一次只能打开一个内容区域。
设定插件的默认值（Defaults）和设置项（options）
jQuery插件可以包括 defaults和 options。Options本质上就是传递给插件的参数。可以使用 options
发送一个参数作为 object literal，这是一个标准 jQuery实践，而不需要传递多个参数。如果您的插件支持 options，使用
defaults对象设置默认的 options将是一个最佳方式。和 options一样，defaults是一个 object
literal，应该包括您想要传递到插件中的属性。
例如，如果您支持一个可用于在首次加载时打开 accordion第一个内容区域的属性，那么在您的插件中应该包括一个 open
属性的默认值。在您的插件中使用 defaults确定默认函数，使用 options覆盖默认值。如果插件接收 options，可以使用
$.extend方法执行覆盖。jQuery的$.extend方法合并两个或多个对象。Code 7中的示例显示在一个自定义 jQuery
插件中使用$.extend方法合并用户定义选项和默认选项的一般实现。
Code 7.向一个自定义的 accordion jQuery插件添加 options和 defaults
(function($){
$.fn.accordion= function(options){
var settings=$.extend({},{open: false}, options);
return this.each(function(){
var dts=$(this).children('dt');
dts.click(onClick);
dts.each(reset);
if(settings.open)$(this).children('dt:first-child').next().show();
});
function onClick(){
$(this).siblings('dt').each(hide);
$(this).next().slideDown('fast');
return false;
}
function hide(){
$(this).next().slideUp('fast');
}
function reset(){
$(this).next().hide();
}
}
})(jQuery);
$.extend方法参数是一个目标对象和 2个或多个合并对象。在本示例中，目标对象是一个空 object
literal，充当合并对象容器。目标将成为一个包含合并对象值的单一对象（在该案例中是 settings变量）。第 2
个参数是一个包含默认插件属性的 object literal。第 3个参数是用户定义的 options参数。要在一个 HTML元素上使用
accordion插件传递 options，需要知道除了之前您作为 object literal传递的属性外还有哪些属性，如下所示。
$('dl#my-accordion').accordion({open:true});
在Code 7示例中，传递到插件的 options通过$.extend方法覆盖 defaults。如果没有传递 options，则使用默认值。对于示例插件，可使用 open属性确定加载时是否打开第一个内容区域。
可重用性
您可以在任何 HTML文档中重用示例 accordion插件，可以在单个 HTML文档中多次使用。您也可以包括多个
accordion结构，就像已创建的那个 accordion，使用刚创建的新 accordion插件通过 jQuery将每个单独定义为
accordion。要向一个 HTML文档添加多个 accordion，只需要添加尽可能多的 accordion结构。Code 8
中的代码包括两个 accordion结构，由一个段落隔开。
Code 8.在同一个 HTML文档中使用多个 accordion
<dl class="accordion" id="my-accordion">
<dt>第1部分</dt>
<dd>内容一</dd>
<dt>第2部分</dt>
<dd>内容二</dd>
<dt>第3部分</dt>
<dd>内容三</dd>
<dt>第4部分</dt>
<dd>内容四</dd>
</dl>
<dl class="accordion" id="my-accordion">
<dt>第5部分</dt>
<dd>内容五d>
<dt>第6部分</dt>
<dd>内容六dd>
<dt>第7部分</dt>
<dd>内容七/dd>
</dl>
Code 8中的两个 accordion结构几乎一样，除了内容不一样外，更重要的是 ID值也不一样。第一个结构包含一个
my-accordion ID值。第 2个结构包含一个 my-accordion2 ID值。现在可以单独定向这些结构。例如，下列
jQuery脚本使用已创建的新插件将每个 accordion结构定义为一个 accordion。
$('dl#my-accordion').accordion({open:true});
$('dl#my-accordion2').accordion({open:true});
两个 accordion结构定义完成后，第一个面板默认设置为打开下图显示一个用在同一个 HTML文档的多个 accordion插件的示例。
对比jQuery和AngularJS的不同思维模式
jQuery是dom驱动，AngularJS是数据驱动，这里有一篇文章阐述的非常好，建议看看
本文来自StackOverFlow上How do I“think in AngularJS” if I have a jQuery background?一题中得票最高的回答。该回答得票超过3000次，回答者Josh David Miller是活跃于开源社区的开发者，也是Emergenesis公司的联合创始人。该答案最初由数云架构师韩铮翻译并发布在自己的博客上，在征得Josh同意后由韩铮本人推荐给 InfoQ进行分享，并在经过InfoQ社区编辑崔康审校后发布在此。
1.不要先设计页面，然后再使用DOM操作来改变它的展现
在jQuery中，你通常会设计一个页面，然后再给它动态效果。这是因为jQuery的设计就是为了扩充DOM并在这个简单的前提下疯狂的生长的。
但是在AngularJS里，必须从头开始就在头脑中思考架构。必须从你想要完成的功能开始，然后设计应用程序，最后来设计视图，而非“我有这么一个DOM片段，我想让他可以实现XXX效果”。
2.不要用AngularJS来加强jQuery
类似的，不要以这样的思维开始：用jQuery来做X，Y和Z，然后只需要把AngularJS的models和controllers加在这上面。这在刚开始的时候显得非常诱人，这也是为什么我总是建议AngularJS的新手完全不使用jQuery，至少不要在习惯使用“Angular Way”开发之前这么做。
我在邮件列表里看到很多开发者使用150或200行代码的jQuery插件创造出这些复杂的解决方案，然后使用一堆callback函数以及$apply把它粘合到AngularJS里，看起来复杂难懂；但是他们最终还是把它搞定了！问题是在大多数情况下这些jQuery插件可以使用很少的AngularJS代码重写，而且所有的一切都很简单直接容易理解。
这里的底线是：当你选择解决方案时，首先“think in AngularJS”；如果想不出一个解决方案，去社区求助；如果还是没有简单的解决方案，再考虑使用jQuery。但是不要让jQuery成为你的拐杖，导致你永远无法真正掌握AngularJS。
3.总是以架构的角度思考
首先要知道Single-page应用是应用，不是网页。所以我们除了像一个客户端开发者般思考外，还需要像一个服务器端开发者一样思考。我们必须考虑如何把我们的应用分割成独立的，可扩展且可测试的组件。
那么如何做到呢？如何“think in AngularJS”？这里有一些基本原则，对比jQuery。
视图是“Official Record”
在jQuery里，我们编程改变视图。我们会将一个下拉菜单定义为一个ul：
<ul class="main-menu">
<li class="active"><a rel="external nofollow" rel="external nofollow" href="#/home">Home</a></li>
<li><a rel="external nofollow" href="#/menu1">Menu 1</a>
<ul>
<li><a rel="external nofollow" href="#/sm1">Submenu 1</a></li>
<li><a rel="external nofollow" href="#/sm2">Submenu 2</a></li>
<li><a rel="external nofollow" href="#/sm3">Submenu 3</a></li>
</ul>
</li>
<li><a rel="external nofollow" rel="external nofollow" href="#/home">Menu 2</a></li>
</ul>
在jQuery里，我们会在应用逻辑里这样启用这个下拉菜单：
$('.main-menu').dropdownMenu();
当我们只关注视图，这里不会立即明显的体现出任何（业务）功能。对于小型应用，这没什么不妥。但是在规模较大的应用中，事情就会变得难以理解且难以维护。
而在AngularJS里，视图是基于视图的功能。ul声明就会像这样：
<ul class="main-menu" dropdown-menu>...</ul>
这两种方式做了同样的东西，但是在AngularJS的版本里任何人看到这个模版都可以知道将会发生什么事。不论何时一个新成员加入开发团队，他看到这个就会知道有一个叫做dropdownMenu的directive作用在这个标签上；他不需要靠直觉去猜测代码的功能或者去看任何代码。视图本身告诉我们会发生什么事。清晰多了。
首次接触AngularJS的开发者通常会问这样一个问题：如何找到所有的某类元素然后给它们加上一个directive。但当我们告诉他：别这么做时，他总会显得非常的惊愕。而不这么做的原因是这是一种半jQuery半AngularJS的方式，这么做不好。这里的问题在于开发者尝试在 AngularJS的环境里“do jQuery”。这么做总会有一些问题。视图是official record（译者注：作者可能想表达视图是一等公民）。在一个directive外，绝不要改变DOM。所有的directive都应用在试图上，意图非常清晰。
记住：不要设计，然后写标签。你需要架构，然后设计。
数据绑定
这是到现在为止最酷的AngularJS特性。这个特性使得前面提到的很多DOM操作都显得不再需要。AngularJS会自动更新视图，所以你自己不用这么做！在jQuery里，我们响应事件然后更新内容，就像这样：
$.ajax({
url:'/myEndpoint.json',
success: function( data, status){
$('ul#log').append('<li>Data Received!</li>');
}
});
对应的视图:
<ul class="messages" id="log"></ul>
除了要考虑多个方面，我们也会遇到前面视图中的问题。但是更重要的是，需要手动引用并更新一个DOM节点。如果我们想要删除一个log条目，也需要针对DOM编码。那么如何脱离DOM来测试这个逻辑？如果想要改变展现形式怎么办？
这有一点凌乱琐碎。但是在AngularJS里，可以这样来实现：
$http('/myEndpoint.json').then(function(response){
$scope.log.push({
msg:'Data Received!'
});
});
视图看起来是这个样子的：
<ul class="messages"><li ng-repeat="entry in log"></li></ul>
但是其实还可以这样来做：
<div class="messages"><div class="alert" ng-repeat="entry in log"></div></div>
现在如果我们想使用Bootstrap的alert boxes，而不是一个无序列表，根本不需要改变任何的controller代码！更重要的是，不论log在何处或如何被更新，视图便会随之更新。自动的。巧妙！
尽管我没有在这里展示，数据绑定其实是双向的。所以这些log信息在视图里也可以是可编辑的。只需要这么做：
<input ng-model="entry.msg"/>
。简单快乐。
清晰的模型（Model）层
在jQuery里，DOM在一定程度上扮演了模型的角色。但在AngularJS中，我们有一个独立的模型层可以灵活的管理。完全与视图独立。这有助于上述的数据绑定，维护了关注点的分离（独立的考虑视图和模型），并且引入了更好的可测性。后面还会提到这点。
关注点分离
上面所有的内容都与这个愿景相关：保持你的关注点分离。视图负责展现将要发生的事情；模型表现数据；有一个service层来实现可复用的任务；在 directive里面进行DOM操作和扩展；使用controller来把上面的东西粘合起来。这在其他的答案里也有叙述，我在这里只增加关于可测试性的内容，在后面的一个段落里详述。
依赖注入
依赖注入帮我们实现了关注点分离。如果你来自一个服务器语言（java或php），可能对这个概念已经非常熟悉，但是如果你是一个来自jQuery的客户端开发者，这个概念可能看起来有点傻而多余。但其实不是的。。。
大体来讲，DI意味着可以非常自由的声明组件，然后在另一个组件里，只需要请求一个该组件的实例，就可以得到它。不需要知道（关心）加载顺序，或者文件位置，或类似的事情。这种强大可能不会立刻显现，但是我只提供一个（常见。。）的例子：测试。
就说在你的应用里，我们需要一个服务通过REST API来实现服务器端存储，并且根据不同的应用状态，也有可能使用（客户端）本地存储。当我们运行controller的测试时，不希望必须和服务器交互——毕竟是在测试controller逻辑。我们可以只添加一个与本来使用的service同名的mock service，injector会确保controller自动得到假的那个service—— controller不会也不需要知道有什么不同。
说起测试……
4.总是——测试驱动开发
这其实是关于架构的第3节。但是它太重要了，所以我把它单独拿出来作为一个顶级段落。
在所有那些你见过，用过或写过的jQuery插件中，有多少是有测试集的？不多，因为jQuery经不起测试的考验。但是AngularJS可以。
在jQuery中，唯一的测试方式通常是独立地创建附带sample/demo页面的组件，然后我们的测试在这个页面上做DOM操作。所以我们必须独立的开发一个组件，然后集成到应用里。多不方便！在使用jQuery开发时，太多的时间，我们挑选迭代而非测试驱动开发。谁又能责怪我们呢？
但是因为有了关注点分离，我们可以在AngularJS中迭代地做测试驱动开发！例如，想要一个超级简单的directive来展现我们的当前路径。可以在视图里声明：
<a rel="external nofollow" rel="external nofollow" href="/hello" when-active>Hello</a>
OK，现在可以写一个测试：
it('should add"active" when the route changes', inject(function(){
var elm=$compile('<a rel="external nofollow" rel="external nofollow" href="/hello" when-active>Hello</a>')($scope);
$location.path('/not-matching');
expect(elm.hasClass('active')).toBeFalsey();
$location.path('/hello');
expect(elm.hasClass('active')).toBeTruthy();
}));
执行这个测试来确认它是失败的。然后我们可以开始写这个directive了：
.directive('whenActive', function($location){
return{
scope: true,
link: function(scope, element, attrs){
scope.$on('$routeChangeSuccess', function(){
if($location.path()== element.attr('href')){
element.addClass('active');
} else{
element.removeClass('active');
}
});
}
};
});
测试现在通过了，然后我们的menu按照请求的方式执行。开发过程既是迭代的也是测试驱动的。太酷了。
5.概念上，Directives并不是打包的jQuery
你经常会听到“只在directive里做DOM操作”。这是必需的。请给它应有的尊重！
但让我们再深入一点……
一些directive仅仅装饰了视图中已经存在的东西（想想ngClass）并且因此有时候仅仅直接做完DOM操作然后就完事了。但是如果一个 directive像一个“widget”并且有一个模版，那么它也要做到关注点分离。也就是说，模版本身也应该很大程度上与其link和 controller实现保持独立。
AngularJS拥有一整套工具使这个过程非常简单;有了ngClass我们可以动态地更新class；ngBind使得我们可以做双向数据绑定。ngShow和ngHide可编程地展示和隐藏一个元素；以及更多地——包括那些我们自己写的。换句话说，我们可以做到任何DOM操作能实现的特性。DOM操作越少，directive就越容易测试，也越容易给它们添加样式，在未来也越容易拥抱变化，并且更加的可复用和发布。
我见过很多AngularJS新手，把一堆jQuery扔到directive里。换句话说，他们认为“因为不能在controller里做DOM操作，就把那些代码弄到directive里好了”。虽然这么做确实好一些，但是依然是错误的。
回想一下我们在第3节里写的那个logger。即使要把它放在一个directive里，我们依然希望用“Angular Way”来做。它依然没有任何DOM操作！有很多时候DOM操作是必要的，但其实比你想的要少得多！在应用里的任何地方做DOM操作之前，问问你自己是不是真的需要这么做。有可能有更好的方式。
这里有一个示例，展示出了我见过最多的一种模式。我们想做一个可以toggle的按钮。（注意：这个例子有一点牵强、啰嗦，这是为了表达出使用同样方式处理问题的更复杂的情况。）
.directive('myDirective', function(){
return{
template:'<a class="btn">Toggle me!</a>',
link: function(scope, element, attrs){
var on= false;
$(element).click(function(){
if(on){
$(element).removeClass('active');
} else{
$(element).addClass('active');
}
on=!on;
});
}
};
});
这里有一些错误的地方。首先，jQeury根本没必要出现。我们在这里做的事情都根本用不着jQuery！其次，即使已经将jQuery用在了页面上，也没有理由用在这里。第三，即使假设这个directive依赖jQuery来工作，jqLite(angular.element)在加载后总会使用jQuery！所以我们没必要使用$——用angular.element就够了。第四，和第三条紧密关联，jqLite元素不需要被$封装——传到link里的元素本来就会是一个jQuery元素！第五，我们在前面段落中说过，为什么要把模版的东西混到逻辑里？
这个directive可以（即使是更复杂的情况下！）写得更简单：
.directive('myDirective', function(){
return{
scope: true,
template:'<a class="btn" ng-class="{active: on}" ng-click="toggle()">Toggle me!</a>',
link: function(scope, element, attrs){
scope.on= false;
scope.toggle= function(){
scope.on=!$scope.on;
};
}
};
});
再一次地，模版就在模版里，当有样式需求时，你（或你的用户）可以轻松的换掉它，不用去碰逻辑。重用性—— boom！
当然还有其他的好处，像测试——很简单！不论模版中有什么，directive的内部API从来不会被碰到，所以重构也很容易。可以不碰directive就做到任意改变模版。不论你怎么改，测试总是通过的。
所以如果directive不仅仅是一组类似jQuery的函数，那他们是什么？Directive实际是HTML的扩展。如果HTML没有做你需要它做的事情，你就写一个directive来实现，然后就像使用HTML一样使用它。
换句话说，如果AngularJS库没有做的一些事情，想想开发团队会如何完成它来配合ngClick，ngClass等。
不要用jQuery。连include也不要。它会让你停滞不前。如果遇到一个你认为已经知道如何使用jQuery来解决的问题，在使用$之前，试试想想如何在AngularJS的限制下解决它。如果你不知道，问！20次中的19次，最好的方式不需要jQuery。如果尝试使用jQuery会增加你的工作量。
这是我目前最长的Stack Overflow回答。事实上，这个答案太长了，我都要填一个Captcha了。但是就如我常说的：能说多时候说的少其实就是懒。
希望这个答案对你有用。
jquery导航菜单的问题
我有自己写的比较好的代码，效果预览可以去我一个客户的网站去看看。
百度不让发链接，请自行百度我客户的网址：黑龙江弘远泰斯科技有限公司。
这个代码的原理是每个菜单项目hover触发弹出，但hover移出时不响应；在上级div中建立hover的移出事件，关闭菜单。
具体css、html请在我客户网站上复制吧。源代码都是可以看到的。
还有，就是建议用jquery1.9.1，1.7会在频繁hover后高度卡住的bug。
代码如下：
$('div.navli').hover(function(){
var_this=$(this);
if(_this.attr('isshow')){
_this.attr('isshow','').find('.submenu').stop().slideUp(300);
}else{
_this.attr('isshow','yes').find('.submenu').slideDown(300);
}
},null)
$('div.nav').hover(null,function(){
$('div.submenu').attr('isshow','').stop().slideUp(300);
})
在就是用jquery的插件，但得有一个熟悉的过程，当用好了就得心应手了。
关于jquery下拉菜单插件和jquery下拉菜单点击事件的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。