JQuery 实现 菜单的隐藏和打开

最新推荐文章于 2022-02-25 18:19:43 发布
最新推荐文章于 2022-02-25 18:19:43 发布
阅读量249 收藏
点赞数
文章标签： jQuery HTML XHTML Web C ViewUI
[align=center][size=x-large][color=green]多谢指教[/color][/size][/align][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.图片自己搜，分别为 关闭图片和打开图片
villain0
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery实现菜单的显示和隐藏功能示例
01-21
本文实例讲述了jQuery实现菜单的显示和隐藏功能。分享给大家供大家参考，具体如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>www.jb51.net jQuery显示菜单隐藏和显示</title> </head> <body> [removed][removed] [removed] /*jQuery演示*/ $(function(){ $(#div1).cl
jQuery实现菜单的隐藏和显示
weixin_30455661的博客
07-30 1346
首先我们先制作好菜单的大致框架，然后再利用jQuery对菜单的隐藏和显示属性进行判断，如果是隐藏的就显示，如果是显示的就隐藏 我们先用一个ul写出大概的框架 ul>li*4这是一个简便的写法按tab键就可以实现如下的效果 <ul> <li></li> ...
Jq实现多级菜单展开隐藏并且加上加号或者减号区分有无下级
qq_45067263的博客
05-17 389
Css: ul li { list-style: none; } li ul{ display: none; } .plus{ list-style-image: url(img/plus.gif); } .minus{ list-style-image: url(img/minus.gif); } Html: <ul> <li>主题1 <ul> <li>主题2 <
用jQuery实现菜单隐藏
一万年太久,只争朝夕
02-26 507
jQuery实现菜单点击隐藏             $(document).ready(function () {         //eg.1         $('#menu-1').menuToggle({             'ctrlBtn':'ctrl-btn-1',             'speed':400,             'width':4
Jquery实现菜单栏
weixin_30415801的博客
10-18 618
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="JQ.js"></script> <script> ...
JS/jQuery 显示弹出菜单时点击其他元素隐藏菜单的简单方法
易水的专栏
08-22 964
要在点击其他元素时隐藏菜单或者说特定的元素，首先要做到的是检查用户是否点击其他元素。 网上通常的做法是关联$(document)的点击事件。不过这样需要处理冒泡，而且用户在任何时候按键，都会触发事件，虽然处理得好的代码可以合适地安排冒泡与缺省事件动作，但毕竟麻烦，让人放心不下以及影响性能（C程序员的职业病出来了）。 其实要解决这个问题很简单，只需要换个思路：在显示弹出菜单/元素时，建立一个覆盖...
初步使用Jquery实现隐藏式菜单
weixin_43803985的博客
07-26 571
（1）引入jquery的文件 （2）代码解释：当鼠标单击含有level1的元素时，给其添加一个名为current的样式，然后将其紧邻后面的元素显示出来，同时将它的父辈元素内部的子元素a都去掉一个为current的class样式，并将紧邻它后面的元素都隐藏 （3）大致效果为 =<!DOCTYPE html> <html> <head> <meta...
jquery控制页面的展开和隐藏实现方法(推荐)
11-26
【jquery代码】  [removed] require(["jquery","validate","bootstrap","lhgcalendar"],function($) { $(function(){ $("form").validate(); }); $(".up").click(function(){ $(this).parent().parent().parent().parent().next().slideToggle("slow"); });
jQuery点击展开其他自动关闭
11-04
并非专业jQuery写手，纯属兴趣，目的提升自己，方便大家。
jquery点击展开的隐藏侧边栏导航菜单插件
12-11
这是一款jquery隐藏侧边栏导航菜单插件。当点击菜单按钮后，隐藏的侧边栏导航菜单出现，并且菜单选项带有很炫的动画效果。再次点击菜单按钮，侧边栏消失。
jquery点击展开菜单
12-30
整理好的jquery点击展开菜单。可以直接套用
JQuery：实现列表展开和缩放
superSmart_Dong的博客
02-13 3417
&lt;html&gt; &lt;head&gt; &lt;script type="text/javascript" src="/jquery/jquery.js"&gt;&lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;h4&gt;游戏分类&lt;/h4&gt; &lt;u
Jquery控制点击时一、二级菜单自由隐藏与出现
天道酬勤
07-07 1万+
Jquery控制网页一二级菜单在点击时级联显示。
利用jQuery 实现一个简单的侧边菜单隐藏显示功能
github_38725775的博客
06-27 3063
直接步入正题，创建一个html文件， 复制以下代码部分就能看到效果 boot样式用的网络资源，可以直接使用 jQuery库自行添加 ps:没有拆分，有点略长，不过直接复制就能用了。 可以结合bootstrap，根据个人喜好，demo用了boot的样式可以不用，不引入即可。效果图 代码部分<!DOCTYPE html> <html lang="en"> <head> <meta charset
( 菜单 )jquery 默认隐藏div,点击按钮显示，再次点击隐藏
热门推荐
yapengliu的博客
05-01 1万+
( 菜单 )jquery 默认隐藏div,点击按钮显示，再次点击隐藏 <div id="exPara" style="display:none"> 显示的内容 <div> 按钮： <button id="but" name="aa" /> $("#but").click(function(){ if($("#...
jQuery方法实现下拉菜单显示和隐藏
XDarker的博客
05-24 2409
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X...
Unity 【Content Size Fitter】- 聊天气泡自动适配Text文本框大小
当代野生程序猿
02-25 5533
通常在展示人物对话的时候文本的长度是不定的，因此会需要动态的调整对话内容文本框的背景图片的大小，这里以如下这种气泡框的对话为例： 实现该需求涉及到的内容包括Content Size Fitter组件的使用、2D Sprite工具包的使用。 Content Size Fitter组件用于Text文本框，如图所示，我们将Horzontal Fit设为Preferred Size，当我们调整Text文本框中的内容时，其大小会自动进行调整。 注意Rect Transform中Pivot轴心点的设置
jQuery UI实战：探索折叠菜单(Accordion)的构建与定制
jQuery UI 的折叠菜单提供了一种简洁、直观的方式来组织和展示网页内容，通过灵活的配置和扩展，可以适应各种界面设计需求。无论是新手还是经验丰富的开发者，都能从中受益，快速构建出专业且用户友好的界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值