效果图：
![]()
全部代码：
<!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>
<title></title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
body
{
font-size: 15px;
padding: 100px;
}
.menu
{
width: 500px;
border-bottom: solid 1px gray;
}
.menu h3
{
border: solid 1px gray;
height: 30px;
line-height: 30px;
padding-left: 10px;
padding: 0 5px;
border-bottom: none;
cursor: pointer;
}
.menu p
{
border-left: solid 1px gray;
border-right: solid 1px gray;
padding: 5px 0;
padding-left: 5px;
}
.changecolor{background-color:red;}
</style>
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$(".menu p:not(:first)").hide();
$(".menu h3").css("background", "#ccc");
// $(".menu h3").hover(function () { $(this).addClass("changecolor"); }, function () { $(this).removeClass("changecolor"); });
// $(".menu h3").click(function () { $(this).css("background", "red").next("p").show().siblings().hide(); });
$(".menu h3").hover(function () { $(this).css("background-color", "gray").siblings("h3").css("background-color", "#ccc"); })
$(".menu h3").mouseleave(function () { $(".menu h3").css("background", "#ccc") }); //离开时将其变为原来颜色
var index = $(".menu h3").index(this);
$(".menu h3").click(function () { $(this).next("p").slideToggle().siblings("p").slideUp(); });
});
</script>
</head>
<body>
<div class="menu">
<h3>
我的好友</h3>
<p>
周杰伦<br />
温</p>
<h3>
我的朋友</h3>
<p>
李连杰<br />
本拉登</p>
<h3>
陌生人</h3>
<p>
比尔盖茨<br />
阿娇</p>
</div>
</body>
</html>
分享到：
相关推荐
jquery css3实现动态选项卡菜单切换效果
JQuery折叠收缩展开下拉菜单代码，很值得学习，这里是一个压缩文件
jQuery三级下拉导航菜单，是一个菜单的三级下拉，对于新手来说是非常好的学习wed前端的源码
jquery实现输入框点击出现下拉列表树插件代码，jquery实现输入框点击出现下拉列表树插件代码（html）
jquery QQ浏览器鼠标点击滑动下拉菜单左右滑动切换导航菜单 jquery QQ浏览器鼠标点击滑动下拉菜单左右滑动切换导航菜单 jquery QQ浏览器鼠标点击滑动下拉菜单左右滑动切换导航菜单
网上找了很久这种菜单,浪费了很多时间，实在没办法，只好老老实实去官网上按说明弄了一个，并更新了，jquery1.5.2, 希望给有需要的朋友可以节约一点时间，欢迎交流,qq:170262
jQuery下拉菜单选中搜索框插件代码jQuery下拉菜单选中搜索框插件代码
非常好的SEO菜单栏，jQuery三级下拉列表导航菜单
简单jquery下拉菜单流畅版
jquery 简单编辑的多级下拉菜单，适用于前端jquery初学者。
将lanrenzhijia.css样式引入到你的样式中
动态滑动门菜单导航，纯色调代码，不占用带宽
jQuery手机端三级联动下拉菜单特效.
54.jquery自动播放图片滚动漂浮式效果的示例 55.jquery贴图旋转及缩放插件下载 56.jquery门户网站首页全屏弹性伸缩至小屏的广告代码(非常实用) 57.jQuery黑色动感Ajax无刷新动态分组图片效果代码 58.jquery...
主要是导航上的下拉菜单，应用了css3,html5,jquery。代码简单明了，显而易见。
人生苦短，我愿分享。本公众号将秉持活到老学到老学习无休止的交流分享开源精神，汇聚于互联网和个人学习工作的精华干货知识，一切来于互联网，...对应本平台的讨论和答疑QQ群：大数据和人工智能（总群）（779809018）
纯jquery 实现全国省市区三级联动下拉菜单
jQuery支持模糊查询下拉框菜单选择代码
jquery_无限级联菜单，无需ajax，纯json数据调用 简单的调用方式 $.getScript("toregion.js",function(){ var ops = { tree_json:regionConf,//json字符串 tree_json_name:"regionConf",//json字符串变量名称 ...
jQuery五级导航下拉菜单基于jquery.1.8.2.min.js制作，简单实用，可做无限极下拉菜单。