【JQuery】——横向纵向下拉菜单

浏览数：40 / 时间：2015年06月09日

在学习jQuery的过程中，遇到项目中最常用到的下拉菜单，本着高效的原则，在此总结一下横向和纵向下拉菜单的实现效果，形成自己的小类库，以便自己在项目过程中能够方便的调用。

HTML部分：

引用menu.css、jquery.js（已经封装好的）和menu.js文件

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>JQuery实战-菜单效果</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link type="text/css" rel="stylesheet" href="css/menu.css" />
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/menu.js"></script>
</head>
<body>
    <ul>
        <li class="main"><a href="#">体育</a>
            <ul>
                <li><a href="#">运动与健康</a></li>
                <li><a href="#">身体的奥秘</a></li>
            </ul>
        </li>
        <li class="main"><a href="#">文学</a>
            <ul>
                <li><a href="#">文学与形式</a></li>
                <li><a href="#">现代文学</a></li>
            </ul>
        </li>
        <li class="main"><a href="#">数学</a>
            <ul>
                <li><a href="#">高数</a></li>
                <li><a href="#">线性代数</a></li>
            </ul>
        </li>
    </ul>
   
    <br/>
    <br/>

    <ul>
        <li class="hmain"><a href="#">体育</a>
            <ul>
                <li><a href="#">运动与健康</a></li>
                <li><a href="#">身体的奥秘</a></li>
            </ul>
        </li>
        <li class="hmain"><a href="#">文学</a>
            <ul>
                <li><a href="#">文学与形式</a></li>
                <li><a href="#">现代文学</a></li>
            </ul>
        </li>
        <li class="hmain"><a href="#">数学</a>
            <ul>
                <li><a href="#">高数</a></li>
                <li><a href="#">线性代数</a></li>
            </ul>
        </li>
    </ul>
</body>
</html>

CSS部分：

实现样式排列

ul, li {
	/*清除ul和li上默认的小圆点*/
	list-style: none;
}
ul {
	/*清除子菜单的缩进值*/
	padding: 0;
	margin: 0;
}
.main, .hmain {
	background-image: url(../images/title.gif);
	background-repeat: repeat-x;
	width: 120px;
}
li {
	background-color: #EEEEEE;
}
a {
	/*取消所有的下划线*/
	text-decoration: none;
	padding-left: 20px;
	display: block;
	display: inline-block;
	width: 100px;
	padding-top: 3px;
	padding-bottom: 3px;
}
.main a, .hmain a {
	color: white;
	background-image: url(../images/collapsed.gif);
	background-repeat: no-repeat;
	background-position: 3px center;
}
.main li a, .hmain li a {
	color: black;
	background-image: none;
}
.main ul, .hmain ul {
	display: none;
}
.hmain {
	float: left;
	margin-right: 1px;
}

JS部分：

通过JS响应事件实现下拉效果（menu.js）：

$(document).ready(function(){
	//页面中的DOM已经装载完成时，执行的代码
	$(".main > a").click(function(){
		//找到主菜单项对应的子菜单项
		var ulNode = $(this).next("ul");
		ulNode.slideToggle();
		changeIcon($(this));
	});
	$(".hmain").hover(function(){
		$(this).children("ul").slideDown();
		changeIcon($(this).children("a"));
	},function(){
		$(this).children("ul").slideUp();
		changeIcon($(this).children("a"));
	});
});

/**
 * 修改主菜单的指示图标
 */
function changeIcon(mainNode) {
	if (mainNode) {
		if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
			mainNode.css("background-image","url('images/expanded.gif')");
		} else {
			mainNode.css("background-image","url('images/collapsed.gif')");
		}
	}
}

实现的效果图为：

技术分享

有了这些封装好的方法，在项目中我们就可以直接调用了。

jQuery与JavaScript：

JavaScript 是一种脚本语言，主要用在浏览器中，实现对网页的文档对象的操作和一些用户交互动作的处理。
而 jQuery 则是 JavaScript 的一个类库，它将一些在 JavaScript 开发中经常用到的功能集合起来，以方便开发者直接使用，而不需要再用原生 JavaScript 语句写大量代码，同时可在不同浏览器间实现一致的效果。是当前最流行的 JavaScript 库之一。

如果把JavaScript比作原料的话，那么jQuery就是半成品。做项目成品过程中，用原料直接做当然没问题，但肯定没有用半成品效率高。所以jQuery就是提高我们效率的半成品。

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

【JQuery】——横向纵向下拉菜单

标签： jqueryjquery