JQuery【下拉菜单】
来源：互联网 发布：淘宝ceo和天猫ceo 编辑：程序博客网 时间：2024/05/30 04:27
CSS代码：<style type="text/css">ul, li { /*清除ul和li上默认的小圆点*/ list-style: none;}ul { /*清除子菜单的缩进值*/ padding: 0; margin: 0;}.main { 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{ color: white; background-image: url(images/collapsed.gif); background-repeat: no-repeat; background-position: 3px center;}.main li a{ color: black; background-image: none;}.main ul { display: none;}</style>JQuery代码：<script type="text/javascript" src="../../jquery-1.4.2.js"></script><script type="text/javascript">$(document).ready(function() { //页面中的DOM已经装载完成时，执行的代码 $(".main > a").click(function() { //找到主菜单项对应的子菜单项 var ulNode = $(this).next("ul"); /* if (ulNode.css("display") == "none") { ulNode.css("display","block"); } else { ulNode.css("display","none"); } */ //ulNode.show("slow");//normal fast //ulNode.hide(); //ulNode.toggle(); // //ulNode.slideDown("slow"); //ulNode.slideUp; ulNode.slideToggle(); changeIcon($(this)); });});/*** 修改主菜单的指示图标*/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')"); } }}</script>HTML代码：<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>下拉菜单</title></head><body><ul> <li class="main"><a href="#">菜单项1</a> <ul> <li><a href="#">子菜单项1_1</a></li> <li><a href="#">子菜单项1_2</a></li> <li><a href="#">子菜单项1_3</a></li> </ul> </li> <li class="main"><a href="#">菜单项2</a> <ul> <li><a href="#">子菜单项2_1</a></li> <li><a href="#">子菜单项2_2</a></li> <li><a href="#">子菜单项2_3</a></li> </ul> </li> <li class="main"><a href="#">菜单项3</a> <ul> <li><a href="#">子菜单项3_1</a></li> <li><a href="#">子菜单项3_2</a></li> <li><a href="#">子菜单项3_3</a></li> </ul> </li> </ul></body></html>
