jquery实现很优美的下拉菜单

原创 2012年03月26日 19:13:00
//很简单也很优美的下拉菜单
<!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" language="javascript" src="../../jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function(){
	//找到所有span,并且当点击span以后控制下一个元素div的显示和隐藏
	$("span").click(function(){
	$(this).next().toggle("slow");
		});
		
//初始化隐藏状态
$(".menu").each(function(index,domEle){
	$(domEle).toggle();
	});
	
	});
</script>
</head>
<body>
<div>
<span>数码产品</span>
<div class="menu">
<a href="#">数码相机1</a><br>
<a href="#">数码相机2</a><br>
<a href="#">数码相机3</a><br>
</div><br>
<span>家用电器</span>
<div class="menu">
<a href="#">手电筒1</a><br>
<a href="#">手电筒2</a><br>
<a href="#">手电筒3</a><br>
</div><br>
<span>衣帽服饰</span>
<div class="menu">
<a href="#">大衣1</a><br>
<a href="#">大衣2</a><br>
<a href="#">大衣3</a><br>
</div>
</div>

</body>
</html>


jquery 实现自定义下拉菜单实现

body{font-family:"方正兰亭黑简体";margin:0px;padding:0px} .title-name { background: #4f9ae4 none repea...
  • lj102800
  • lj102800
  • 2016年08月03日 14:49
  • 1072

【WC模拟】优美的树

Description众所周知,树是n 个节点n-1 条边的结构,而所谓的优美的树需要满足如下条件: 1. 这是一棵有根二叉树; 2. 非叶节点需有两个儿子; 3. 不可以变换为k-左偏树。 ...
  • alan_cty
  • alan_cty
  • 2017年01月18日 20:49
  • 271

【JQuery】使用JQuery实现城市两级或三级联动(下拉菜单)

本文只要是通过使用JQuery实现城市(省、市、县)两级或三级联动,并使用下拉菜单展现。主要的代码如下: 1、在Controller中的代码: @RequestMapping(value="/tour...
  • zsq520520
  • zsq520520
  • 2017年03月07日 11:11
  • 955

Jquery实现缓慢显示下拉菜单

Jquery实现缓慢显示下拉菜单
  • Wangdanting123
  • Wangdanting123
  • 2016年05月09日 21:29
  • 5070

js实现下拉菜单

效果:平时在网页上经常会看到导航栏在鼠标经过时,字体颜色和背景会改变,然后会显示下拉菜单。 原理:js实现在鼠标经过时,改变字体的颜色和背景,然后下拉菜单显示。一般情况下,下拉菜单处于隐藏的状态。 ...
  • liuwengai
  • liuwengai
  • 2016年06月09日 16:51
  • 2073

c++高精模板(+ ,-,*,/)

#include #includestring> #includestring.h> #include using namespace std; //compare比较函数:相等返回0,大于返回1,...
  • Loi_xh
  • Loi_xh
  • 2016年07月22日 11:09
  • 482

jquery带动画的二级下拉列表

带动画 的二级下拉列表 无标题文档 *{padding:0; margin:0;} li{ list-style:none} a{ text-decoration:none;} .nav...
  • daimomo000
  • daimomo000
  • 2016年12月20日 10:38
  • 573

利用jquery、json实现前台无刷新的多级联动下拉菜单

这两天我都在做一个项目,s2sh的一个项目,里面有一个模块需要
  • u011687037
  • u011687037
  • 2014年07月20日 19:24
  • 4216

jquery简单的多级下拉菜单

引入js文件: CSS部分:   .c1{      float:left;      border:1px solid red;      width:100px;      he...
  • u012188080
  • u012188080
  • 2013年11月20日 09:03
  • 664

如何写出漂亮的代码 (转载)

要判断一个程序员是不是好的程序员,主要看他写的代码,因为程序员最重要的事是写代码。   即便不去理解代码的意图,只要看一眼,好的程序员写的代码与差的程序员写的代码基本上就可以看出来。好的程序员写的代码...
  • yaomoon
  • yaomoon
  • 2014年04月16日 18:24
  • 1334
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery实现很优美的下拉菜单
举报原因:
原因补充:

(最多只允许输入30个字)