当前位置：A5下载 > 编程开发 > 网站开发 > 分享我的jquery实现下拉菜单心的方法

分享我的jquery实现下拉菜单心的方法

时间：2015-11-30 16:54作者：fang人气：179

摘要：

jquery库给我们带来了很多方便的地方，使用jquery实现一个简单的下拉菜单已经是很简单了，但也有不同的实现方法。今天自己使用jquery写了一个下拉菜单，参考了Xiaofeng Wang的SexyDropDownMenu2010，其中还是有一些东西感觉值得记录一下。

实现：

首先上他的代码（把全部的代码贴上来太长了，就捡部分吧），

一、html中ul列表

<li><a href="#">Tutorials</a>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

</ul>

</li>

<li><a href="#">Resources</a>

</ul>

</li>

<li><a href="#">About Us</a></li>

<li><a href="#">Advertise</a></li>

<li><a href="#">Submit</a></li>

<li><a href="#">Contact Us</a></li>

</ul>

其中为六层深度的菜单结构，如下图

分享我的jquery实现下拉菜单心的方法

二、js部分（css就不贴出来了）

$(document).ready(function() {

//第一部分

// Top Menu

//Only shows drop down trigger when js is enabled (Adds empty span tag after ul.submenu1*)

$("ul.submenu1").parent().append("<span></span>");

//第二部分

$("ul.topmenu li span").click(function() { //When trigger is clicked...

//Following events are applied to the submenu1 itself (moving submenu1 up and down)

//Drop down the submenu1 on click

$(this).parent().find("ul.submenu1").slideDown('fast').show();

//在click后给绑定hover处理函数，感觉是比较巧妙的地方

$(this).parent().hover(function() {

}, function() {

//When the mouse hovers out of the submenu1, move it back up

$(this).parent().find("ul.submenu1").slideUp('slow');

});

//Following events are applied to the trigger (Hover events for the trigger)

}).hover(function() {

//On hover over, add class "hover"

$(this).addClass("hover");

}, function() { //On Hover Out

//On hover out, remove class "hover"

$(this).removeClass("hover");

});

//第三部分

$("ul.topmenu li ul.submenu1 li").hover(function() {

$(this).find("ul.submenu11:first").show("slow");

}, function() {

$(this).find("ul.submenu11:first").hide("fast");

});

})；

第一部分：

添加了下了菜单的一个触发按钮

第二部分：

绑定了一个click事件的处理函数

触发按钮被click后给下拉菜单最外层的li绑定hover处理函数，感觉是比较巧妙的地方。

给最外层的li绑定hover函数，这里处理函数写的是当鼠标悬停在li上时不做任何处理（第一函数为空），当鼠标离开时li收起。

这样一来，后面展开ul的菜单都是最外层的li里面，这样菜单就不会自动收起了，也就是等于是鼠标离开了整个菜单，li会自动收起。

第三部分：

给菜单下中嵌套的ul的hover事件绑定函数，用于展开和收起下一级菜单

$(this).find("ul.submenu11:first")也是比较巧妙的通过find获得当前匹配元素集合中每个元素的后代，并通过“ul.submenu11:first”筛选活动下一代元素给以展开。

同时也给下一级菜单绑定了收起的处理函数，与触发菜单中click给最外层li绑定的收起函数一同作用，是想菜单的自动收起功能。

总结：

其中展现了jquery筛选器的强大和灵活，也体现jquery优美的链式语法。

下面给大家分享一段纯jQuery水平下拉菜单实现

<!DOCTYPE html>

<html>

<head>

<title>jQuery水平下拉菜单实现</title>

<!--[if lt IE 9]>

<![endif]-->

.menus{border:1px solid red; float:left; margin-left:4px; background:red;}

.menus a{display:block; width:100px; text-align:center;}

.menu{display:none;}

a{cursor:pointer;text-decoration:none;}

a:hover{background:white; text-decoration:none;}

a:visited{text-decoration:none; color:black;}

</style>

$(function(){

$(".menu-title").click(function(){

$(this).next().toggleClass();

});

</script>

</head>

<body>

</div>

</div>

</div>

</div>

</body>

</html>

以上就是本文章的内容，希望对大家有所帮助

标签分享,我的,jquery,实现,下拉菜单,方法,摘要,jqu

A5站长下载站

分享我的jquery实现下拉菜单心的方法

相关推荐

相关下载

网友评论

热门阅览

最新排行