<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="jquery-3.7.1.min.js"></script>
<style>
li{list-style: none;float: left;}
a{display: block;}
p{margin-right: 20px;cursor: pointer;
background-image:url(pro_left.png);background-repeat: no-repeat;
background-position: right;width: 115px;
}
</style>
</head>
<body>
<script>
$(function(){
$('p').attr("flag","0");
$('a').hide();
$('p').click(function(){
var n=$(this).attr("flag");
if(n==0){
$(this).attr("flag","1");
$(this).parent().siblings('li').children('p').attr("flag",'0');
$(this).next('div').children('a').show();
$(this).parent('li').siblings('li').children('div').children('a').hide();
$(this).css("background-image","url(pro_down.png)");
$(this).parent('li').siblings('li').children('p').css("background-image","url(pro_left.png)");
}else{
$(this).attr("flag","0");
$(this).next('div').children('a').hide();
$(this).css("background-image","url(pro_left.png)");
}
})
})
</script>
<li>
<p>第一个菜单</p >
<div>
<a>11</a >
<a>22</a >
<a>33</a >
</div>
</li>
<li>
<p>第二个菜单</p >
<div>
<a>44</a >
<a>55</a >
<a>66</a >
</div>
</li>
<li>
<p>第三个菜单</p >
<div>
<a>77</a >
<a>88</a >
<a>99</a >
</div>
</li>
</body>
</html>
1471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
