JQuery 实现 菜单的隐藏和打开

多谢指教
[align=center][/align][size=medium][/size]

1.下载 JQuery 文件 并修改名字为jquery.min.js 放在 web-inf 自建的js文件夹下
2.下载所附的两张图片
3.代码如下
<!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=gb2312">

<script language="javascript" src="jquery.min.js"></script>
<script>
  var imgclose = "apt_arrow_a.gif";
  var imgopen = "apt_arrow_b.gif"
$(function() {
$('.p_c').click(function(){
var id = this.id.split('_')[1];
if ($(this).html().indexOf('apt_arrow_a.gif') != -1) {
$(this).html('<img src="' + imgopen + '"/>发布日期');
$('#ul_' + id).show();
} else {
$(this).html('<img src="' + imgclose + '"/>发布日期');
$('#ul_' + id).hide();
}
});
});
</script>
</head>


<body>
<div>
<p id="pc_1" class="p_c"><img src="apt_arrow_b.gif"/>发布日期</p>
<ul id="ul_1">
<li>近一天 (7400)</li>
<li>近二天 (9681)</li>
<li>近三天 (9834)</li>
<li>近一周 (11374)</li>
<li>近两周 (12348)</li>
<li>近一月 (13586)</li>
<li>近六周 (14324)</li>
<li>近两月 (15571)</li>
</ul>

<p id="pc_2" class="p_c"><img src="apt_arrow_b.gif"/>发布日期</p>
<ul id="ul_2">
<li>近一天 (7400)</li>
<li>近二天 (9681)</li>
<li>近三天 (9834)</li>
<li>近一周 (11374)</li>
<li>近两周 (12348)</li>
<li>近一月 (13586)</li>
<li>近六周 (14324)</li>
<li>近两月 (15571)</li>
</ul>

<p id="pc_3" class="p_c"><img src="apt_arrow_b.gif"/>发布日期</p>
<ul id="ul_3">
<li>近一天 (7400)</li>
<li>近二天 (9681)</li>
<li>近三天 (9834)</li>
<li>近一周 (11374)</li>
<li>近两周 (12348)</li>
<li>近一月 (13586)</li>
<li>近六周 (14324)</li>
<li>近两月 (15571)</li>
</ul>
</div>
</body>
</html>
4.图片自己搜,分别为 关闭图片和打开图片

你可能感兴趣的:(html,jquery,c,Web,XHTML)