多谢指教
[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.图片自己搜，分别为 关闭图片和打开图片
分享到：
相关推荐
本项目探讨的是如何使用jQuery实现一个隐藏在屏幕侧面的导航菜单，这种设计模式通常被称为侧滑或抽屉式菜单，常见于移动应用和响应式网页设计中。以下是对这个主题的详细阐述： 首先，我们需要理解jQuery的基本概念...
在这个“Jquery实现下拉菜单”的主题中，我们将深入探讨如何在Visual Studio 2008（使用.NET Framework 3.5）环境下，利用jQuery创建功能丰富的下拉菜单，并实现点击当前菜单项时关闭其他打开的菜单。以下是关于这个...
可以使用 `display:none` 或 `visibility:hidden` 来实现隐藏效果，然后通过 CSS3 的 `transform` 属性来控制抽屉的打开和关闭，例如 `translateX(-100%)` 和 `translateX(0)`。 2. **jQuery选择器**：jQuery 提供...
同时，为打开和关闭状态设置不同的样式，以便在菜单展开和收起时有所变化。 7. **响应式设计**：确保导航菜单在不同屏幕尺寸下都能正常工作。这可能需要使用媒体查询(`@media`)来根据视口宽度调整样式。 8. **...
标题“jquery点击向上弹出二级菜单，再点击隐藏”涉及到的是使用jQuery来实现一个交互式二级菜单的功能，这个功能在很多网站的导航栏设计中常见。下面将详细介绍如何使用jQuery实现这一功能，以及相关的知识点。 ...
在网页设计中，导航菜单是不可或缺的部分，它帮助用户快速浏览和访问网站的不同部分。本教程将深入探讨如何使用jQuery...在jQuery实战第三讲中，你将找到更详细的代码示例和实践指导，帮助你更好地理解和实现这一技术。
本文将深入探讨“jQuery实现的倾斜打开侧边栏菜单特效”的核心原理和实现步骤，旨在帮助开发者理解和应用这一技术。 首先，jQuery是一个轻量级、高性能的JavaScript库，它的API简洁易用，为开发者提供了丰富的选择...
- 为了实现手风琴效果，需要阻止其他子菜单同时打开。可以使用`siblings()`选择器来关闭当前选中项之外的所有子菜单。 5. **动画效果**： - `slideUp()`和`slideDown()`方法用于在展开和收缩子菜单时添加动画效果...
总结，jQuery下拉菜单的实现涉及HTML、CSS和JavaScript的结合使用，通过jQuery的便利性，我们可以快速创建出具有动画效果和良好用户体验的下拉菜单。在实际项目中，还可以根据需求进行功能扩展和优化，以满足各种...
【标题】：“超级简洁的jquery弹出式左右菜单”是一个基于jQuery实现的高效、轻量级的交互式菜单设计。这种菜单通常用于网页导航，它能够以弹出的形式展示子菜单，提供用户友好的交互体验。 【描述】：这个菜单系统...
最后，"OtisMVCBlog"可能是一个项目文件夹，包含了实际的源代码、资源和配置文件，是实现Jquery树形菜单的核心部分。 综上所述，这个项目可能是一个使用ASP.NET MVC架构开发的博客系统，其中整合了Jquery技术实现...
总结来说，实现一个基于jQuery的移动客户端多级下拉导航菜单，主要步骤包括：创建HTML结构、使用jQuery添加交互性和动画效果，以及优化移动设备的用户体验。在实际项目中，可以根据需求进行进一步的定制和优化，比如...
本资源“jquery默认隐藏鼠标点击显示文字菜单导航代码.zip”显然是一个包含jQuery实现的导航菜单示例代码，适用于网页设计和开发。 在网页设计中，菜单导航是至关重要的组成部分，它帮助用户在网站的不同页面之间...
此特效中的侧边栏不仅能够隐藏和显示，而且在切换时具有3D推拉效果，增强了用户体验，使菜单的打开和关闭过程更具动态感。 CSS（层叠样式表）在这个特效中起到了关键作用，它定义了元素的外观、布局和结构。通过CSS...
在这个项目中，jQuery用于监听汉堡包按钮的点击事件，以及执行打开和关闭侧边栏的操作。 汉堡包按钮通常由三条水平线组成，当点击时会转换为对号或X，表示侧边栏的展开与收起。在HTML中，这可以通过创建一个包含...
本资源“jQuery倾斜打开侧边栏菜单代码.zip”提供了一种创新的菜单导航实现方式，通过jQuery技术和HTML5来创建一个独特且吸引人的侧边栏菜单。下面我们将详细探讨这个菜单特效的实现原理和相关知识点。 首先，我们...
在移动应用和网页设计中，侧滑菜单是一种常见的交互元素，它允许用户通过从屏幕边缘向内滑动来展示或隐藏导航选项。jQuery Mobile 是一个轻量级的、基于 jQuery 的框架，专为触摸设备的网页开发而设计，提供了一套...
本文将深入探讨如何使用jQuery实现右键菜单、遮罩层效果，并介绍相关代码实现，以便开发者能够更好地理解和应用这些功能。 首先，让我们理解"右键菜单"的概念。在网页中，通常我们通过点击左键来触发各种操作，但...