菜单（点击其他标题关闭当前内容）
程序员文章站
2022-07-06 16:34:04
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>菜单</title> <script type="text/javascript" src="...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>菜单</title>
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<style type="text/css">
*{margin: 0;padding: 0;}
body{font-size: 12px;padding: 100px;}
.box{width: 500px;border-bottom: 1px solid #ccc;border-bottom:none;}
.box h1{height: 30px;line-height: 30px;padding:0 10px;font-size: 16px;border: 1px solid #ccc;border-bottom: 1px solid gray;cursor: pointer;background: #ccc url(img/1.gif) no-repeat right -27px}
.box h1:hover{background-color: #e3e2e2;} /*用js显示光标经过时发生的事件*/
.box h1.active{background-position: right 5px;} /*点击后箭头变化*/
/*.box h1:hover{background-color: #e3e2e2;} !*在i6下*!*/
.box p{padding:10px;border-left: 1px solid #ccc;border-right: 1px solid #ccc;}
</style>
</head>
<body>
<div class="box">
<h1>标题一</h1>
<p>内容一</p>
<h1>标题二</h1>
<p>内容二</p>
<h1>标题三</h1>
<p>内容三</p>
<h1>标题四</h1>
<p>内容四</p>
<h1>标题五</h1>
<p>内容五</p>
</div>
<script>
$(function () {
$('.box p:not(:first)').hide();
/*$('.box h1').hover(function () { /!*i6浏览器下光标经过时发生的事件*!/
$(this).addClass('hover');
},function () {
(this).removeClass();
});*/
$(".box h1:first").addClass("active");//第一个默认打开尖头朝上
$('.box h1').click(function () {
$(this).next('p').slideToggle() //显示内容
.siblings('p').slideUp(); //关闭内容
$(this).toggleClass('active')
.siblings('h1').removeClass("active");
})
});
</script>
</body>
</html>效果图：
本文地址：https://blog.csdn.net/Guoyu1_/article/details/85760957