`

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.图片自己搜,分别为 关闭图片和打开图片
2
0
分享到:
评论

相关推荐

    jQuery侧边栏隐藏滑动导航菜单代码.zip

    jQuery侧边栏隐藏滑动导航菜单代码是一款通过汉堡包按钮来打开和关闭侧边栏菜单,并通过CSS3来制作平滑的过渡动画效果。

    JQuery横向纵向导航菜单

    JQuery横向纵向菜单,非常完美,缓慢滑动效果,个人觉得不错。。。

    jQuery侧边栏隐藏滑动导航菜单代码

    jQuery侧边栏隐藏滑动导航菜单代码是一款通过汉堡包按钮来打开和关闭侧边栏菜单,并通过CSS3来制作平滑的过渡动画效果。

    jQuery超酷隐藏菜单放大显示特效插件

    这是一款使用jQuery制作的超酷隐藏菜单放大显示特效插件。该隐藏菜单插件在点击主菜单按钮后,菜单会在屏幕中间以放大动画的方式打开。共5种效果,最后一种效果菜单还会做180度旋转动画。

    jQuery侧边栏隐藏滑动导航菜单特效代码

    jQuery侧边栏隐藏滑动导航菜单代码是一款通过汉堡包按钮来打开和关闭侧边栏菜单,并通过CSS3来制作平滑的过渡动画效果。

    jQuery简单实用的隐藏全屏导航菜单插件

    fatNav是一款简单实用的jQuery全屏导航菜单插件。该导航菜单是一个隐藏菜单,用户通过点击汉堡包导航按钮可以打开一个全屏的导航菜单。该导航菜单的特点是简单易用,时尚大方。

    可滑动触摸的jQuery隐藏侧边栏菜单插件

    slide-and-swipe-menu是一款支持移动手机滑动触摸的隐藏侧边栏菜单jQuery插件。该侧边栏菜单基于touchSwipe插件,可以通过按钮来触发打开侧边栏菜单,并通过滑动触摸来关闭菜单。

    超实用的jQuery代码段

    《超实用的jQuery代码段》的代码跨平台、跨设备、跨浏览器,充分向读者演示了如何使用jQuery的各项技术,实现令人激动的网页效果。   《超实用的jQuery代码段》从jQuery框架的使用原理与应用场景出发,对最实用的...

    3种CSS3移动手机隐藏菜单UI界面设计

    这是一款效果非常酷的jQuery和CSS3移动手机隐藏菜单UI界面设计。这个UI设计共有三种不同的打开隐藏菜单的效果,分别为滑动显示,Material Design风格效果和展开式效果。

    jquery收集效果集合一些选项卡/菜单等很实用的特效

    JS 特效 选项卡 菜单 下拉菜单 滚动特效 相册特效等等 网页特效 素材 web div+css 3级横向导航菜单 163网盘折叠菜单 CSS下拉菜单 div显示隐藏效果 Javascrip实现相册缩略图导航的两种效果 JS 图片轮换 封装中处理...

    ACCP 8.0 jQuery蔚蓝网上书店.zip

    首页:打开首页时弹出固定大小的广告页面窗口 “新手入门”下拉菜单的自动显示与隐藏 随滚动条上下移动的广告图片,展示图书内容。 管理购物车中的商品(购物车页面)。用户注册(新用户注册页面)。用户登录(用户...

    jQuery和css3全屏翻页切换页面特效

    这是一款效果非常炫酷的jQuery和css3全屏翻页切换页面特效插件。该翻页插件有三个主要按钮:先前翻页、向后翻页和打开隐藏侧边栏菜单。通过该翻页插件可以像看书一样浏览网页。

    超酷Bootstrap 3 隐藏滑动侧边栏菜单

    这是一款基于Bootstrap3的炫酷隐藏滑动侧边栏菜单特效。该隐藏侧边栏通过汉堡包按钮来打开和关闭侧边栏菜单,并通过CSS3来制作平滑的过渡动画效果,整体效果非常炫酷。

    jQuery EasyUI 1.3.5 离线简体中文API文档

    menu:新增“hideOnUnHover”属性用于在鼠标离开菜单的时候指示是否需要隐藏菜单; slider:新增“clear”和“reset”方法; tabs:新增“unselect”方法、“onUnselect”事件; tabs:新增“selected”属性,...

    简单实现js点击展开二级菜单功能

    虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有...这里有两个点,实现展现和隐藏用display=”block”和display=”none”,另外就是要做一个判断,if else的判断当前是block还是none。 &lt;!DOCTYPE html&gt;

    jquery-easyui-EDT-1.5.5.7z

    jQuery EasyUI 1.5.5 版本更新内容 Bug(修复) tabs:修复当标题包含符合元素时,所选择的历史顺序错误的问题; combo:修复当设置了一个较大的'delay'值的...progress:增加打开和关闭进度条消息窗体的响应时间。

    jQuery 做的一个综合框架操作小例子

    内容索引:脚本资源,jQuery,折叠框架,左侧菜单 jQuery 做的一个动态控制框架折叠、隐藏操作的综合例子,像一个后台管理的框架,左侧的树形菜单同样也是基于jQuery的,它可以滑动展开或折叠,上则是一个由jquery.tab....

    50个必备的实用jQuery代码段

    25. 如何使用jQuery来检测右键和左键的鼠标单击两种情况: 7 26. 如何显示或是删除input域中的默认值 7 27. 如何在一段时间之后自动隐藏或关闭元素(支持1.4版本): 7 28. 如何把已创建的元素动态地添加到DOM中: 8...

    jQuery LigerUI V1.1.0

    [需求]列 显示和隐藏 [需求]列 表头改变文字 [需求]编辑器事件: 编辑前事件、验证编辑器结果是否通过、结束编辑后事件 [需求]增加右击接口 [需求]多表头 [优化]grid新增行的时候可通过column的defaultValue...

Global site tag (gtag.js) - Google Analytics