下拉框

xuganggogo · 发表于 2013-2-7 19:11:37

<!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>1-3</title><style>#menu { width:300px;} .has_children{ background : #555; color :#fff; cursor:pointer; } .highlight{ color : #fff; background : green; } ul{ list-style:none; padding:0; } ul li{ background : #888; display : none; } </style><script src="lib/jquery.js" type="text/javascript"></script><script type="text/javascript" >$(document).ready(function(){ //等待dom元素加载完毕. $(".has_children").click(function(){ $(this).addClass("highlight").children("li").show().end().siblings().removeClass("highlight").children("li").hide(); }); $('.has_children1').find('dd').hide().end().find('dt').click(function() { var answer = $(this).next(); if (answer.is(':visible')) { answer.slideUp(); } else { answer.slideDown(); } });})</script></head><body><div id="menu"> <ull class="has_children1"> <dt> 第1章-认识一下jQuery </dt> <dd> <li>1.1-jQuery简介</li> <li> 1.2-加入jQuery</li> <li>1.3-编写jQuery代码</li> <li>1.4-jQuery对象和DOM对象</li> <li>1.5-解决jQuery和其它库的冲突</li> <li>1.6-小结</li> </dd> </ull> <ul class="has_children">第2章-jQuery之选择器 <li>2.1-什么是选择器</li> <li>2.2-jQuery选择器的优势</li> <li>2.3-jQuery选择器</li> <li>2.4-选择器中带特殊符号的处理</li> <li>2.5-javascript中的一些对比操作势</li> <li>2.6-做一个图片展示效果</li> <li>2.7-小结</li> </ul> <ul class="has_children">第3章-jQuery之DOM操作 <li>3.1-介绍DOM操作的重要性</li> <li>3.2-jQuery的DOM操作</li> <li>3.3-打造一个图片馆</li> <li>3.4-小结</li> </ul></div></body></html>

		自动登录	找回密码
密码			立即注册