jQuery--左侧菜单收缩隐藏

最新推荐文章于 2024-10-18 11:12:30 发布
最新推荐文章于 2024-10-18 11:12:30 发布
阅读量150 收藏
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/daliangtou/p/5204667.html
版权
实现步骤：
步骤一、
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title ></ title >
     < style >
         .hide{
             display: none;
         }
     </ style >
</ head >
< body >
     < div >
         < div >
             < div id = "m1" onclick = "Change(1);" >菜单一</ div >
             < div >
                 < div >1.1</ div >
                 < div >1.2</ div >
                 < div >1.3</ div >
             </ div >
         </ div >
         < div >
             < div id = "m2" onclick = "Change(2);" >菜单二</ div >
             < div >
                 < div >2.1</ div >
                 < div >2.2</ div >
                 < div >2.3</ div >
             </ div >
         </ div >
         < div >
             < div id = "m3" onclick = "Change(3);" >菜单三</ div >
             < div >
                 < div >3.1</ div >
                 < div >3.2</ div >
                 < div >3.3</ div >
             </ div >
         </ div >
     </ div >
     < script type = "text/javascript" src = "jquery-2.1.4.min.js" ></ script >
     < script type = "text/javascript" >
         function Change(arg){
             //找到，点击的哪一个？
             if(arg==1){
                 var menu=$('#m1')
             }else if(arg==2){
                 var menu=$('#m2')
             }else{
                 var menu=$('#m3')
             }
             console.log(menu.text())
         }
     </ script >
</ body >
</ html >

步骤二、

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
<!DOCTYPE html>
< html lang = "en" >
< head >
     < meta charset = "UTF-8" >
     < title ></ title >
     < style >
         .hide{
             display: none;
         }
     </ style >
</ head >
< body >
     < div >
         < div >
             < div onclick = "Change(this);" >菜单一</ div >
             < div class = "content" >
                 < div >1.1</ div >
                 < div >1.2</ div >
                 < div >1.3</ div >
             </ div >
         </ div >
         < div >
             < div onclick = "Change(this);" >菜单二</ div >
             < div class = "content hide" >
                 < div >2.1</ div >
                 < div >2.2</ div >
                 < div >2.3</ div >
             </ div >
         </ div >
         < div >
             < div onclick = "Change(this);" >菜单三</ div >
             < div class = "content hide" >
                 < div >3.1</ div >
                 < div >3.2</ div >
                 < div >3.3</ div >
             </ div >
         </ div >
     </ div >
     < script type = "text/javascript" src = "jquery-2.1.4.min.js" ></ script >
     < script type = "text/javascript" >
         function Change(arg){
             //找到，点击的哪一个？
             //var t= $(arg).text();
            //console.log(t);
             //$(arg)表示当前点击的标签
             //一、找到下一个标签，移除hide
                 //$(arg).next()下一个标签
                 //removeClaass('')
             $(arg).next().removeClass('hide');
             //二、找到其他菜单，内容隐藏，添加hide
                 //当前标签的父标签 $(arg).parent()
                 //所有父标签的兄弟标签 $(arg).parent().siblings()
                 //所有兄弟标签下的content样式的标签，添加hide样式
             $(arg).parent().siblings().find('.content').addClass('hide');
         }
     </ script >
</ body >
</ html >
效果：​

       827870-20160221174010873-1080184502.png827870-20160221174011936-1870962595.png827870-20160221174012639-136909661.png











转载于:https://www.cnblogs.com/daliangtou/p/5204667.html

weixin_30516243
关注
利用jQuery 实现一个简单的侧边菜单隐藏显示功能
github_38725775的博客
06-27 3086
直接步入正题，创建一个html文件， 复制以下代码部分就能看到效果 boot样式用的网络资源，可以直接使用 jQuery库自行添加 ps:没有拆分，有点略长，不过直接复制就能用了。 可以结合bootstrap，根据个人喜好，demo用了boot的样式可以不用，不引入即可。效果图 代码部分<!DOCTYPE html> <html lang="en"> <head> <meta charset
70、Jquery仿YouTube左侧菜单收缩效果
03-29
70、Jquery仿YouTube左侧菜单收缩效果
jquery左侧悬浮收缩菜单
11-14
从网上下载的： jquery左侧 悬浮/收缩/菜单: 默认就是一个小图标； 点击展开层次结构； 嫌它碍眼可以让它缩到一边。
jquery 导航栏 隐藏 左侧
07-07
jquery 导航栏 隐藏 左侧
jquery实现隐藏在左侧的弹性弹出菜单效果
10-23
主要介绍了jquery实现隐藏在左侧的弹性弹出菜单效果,涉及jQuery动态操作页面元素的显示及隐藏技巧,具有一定参考借鉴价值,需要的朋友可以参考下
jQuery左侧下拉三级收缩菜单_jQuery左侧下拉三级收缩菜单_
09-29
总结一下，构建一个jQuery左侧下拉三级收缩菜单涉及以下几个步骤： 1. 设计HTML结构，创建多级`<ul>`和`<li>`元素。 2. 引入jQuery库，设置菜单样式。 3. 使用jQuery处理鼠标悬停事件，实现菜单的展开与收缩动画。 ...
jQuery可收缩展开左侧流程图菜单列表代码
06-05
在本文中，我们将深入探讨如何使用jQuery来创建一个可收缩展开的左侧流程图菜单列表。这个功能对于构建交互式和用户友好的Web界面至关重要，特别是对于那些需要清晰导航的复杂网站或应用。以下是对该主题的详细分析...
jQuery网页左侧工作流程收缩菜单.zip
07-11
"jQuery网页左侧工作流程收缩菜单"是一个专为提升网页界面效率和用户友好性而设计的组件。这个项目基于jQuery库的1.9.1版本，一个广泛使用的JavaScript库，以其简洁、高效和强大的功能深受开发者喜爱。 jQuery库的...
jQuery可收缩展开左侧流程图菜单列表代码.zip
07-11
- `.toggle()`方法可以用于切换元素的显示与隐藏，与菜单收缩展开功能密切相关。 5. **动画效果**： - jQuery的`.slideToggle()`方法是实现菜单收缩展开的关键，它可以平滑地改变元素的高度，从而实现动画效果。 ...
jQuery左侧伸缩导航菜单.zip
05-27
《jQuery左侧伸缩导航菜单详解》 在网页设计中，导航菜单是不可或缺的一部分，它能够帮助用户快速定位和访问网站内容。"jQuery左侧伸缩导航菜单"是一个实用的JavaScript插件，利用jQuery库实现了多种动态效果，使得...
jQuery推拉式3D隐藏侧边栏菜单特效
12-11
jquery.secretnav是一款效果非常炫酷的jQuery推拉式3D隐藏侧边栏菜单特效。该隐藏侧边栏特效支持从左侧和顶部显示菜单，并且在显示菜单的时候带有3D透视的推拉效果，非常的优美。
jquery特效制作左侧侧边浮动导航菜单滑动显示或隐藏
09-17
17素材的资源，下载还要积分，专门扒下来的，jquery 后台左侧点击折叠关闭功能，不是折叠菜单哦
HTML jquery实现左侧菜单折叠
01-17
HTML jquery实现左侧菜单折叠，简单易学，适合新手。。。
隐藏于网页左侧，鼠标单击展开的CSS菜单代码
weixin_34220623的博客
03-03 127
代码简介： 平时隐藏在左侧的CSS动感菜单，像很多导航菜单一样，不点击的时候隐藏在网页左侧，鼠标放上后自动展开，本款是鼠标点击后才激活，然后动画出现，个人感觉比鼠标放上就触发的要好一点，这样更符合浏览者的意愿。 代码内容： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or...
利用JQuery实现左侧菜单栏可折叠功能
xw1985520的博客
12-26 5562
今天给大家介绍一下左侧菜单栏可折叠功能，在后台管理中左侧菜单折叠功能是特别常见的一个功能，基本不管是什么类型的管理后台都会涉及到这个功能的实现。 今天给大家介绍的是二级可折叠菜单的功能，相对一级的菜单折叠功能就显得稍微比较复杂一点了，我这里将给大家介绍菜单折叠过程中三种变换形式。第一种变换形式是：不管点击哪一级菜单都可以打开或者关闭本级菜单，但是不会影响其他级别的菜单： <!DOCTYPE htm
jquery实现侧边栏的隐藏与显示
aei600024的博客
12-05 631
左侧菜单栏点击一个分类其它分类关闭，并且点击自身也支持关闭。 布局图： 思路： 1.当点击optionDiv的时候添加本次是否点击的in类标记，2、移除其他optionDiv的active类标记，3、当前的optionDiv拥有active类时移除active类，没有avtive类时，添加active类。4、隐藏所有的navListUL5、,显示类为avtive的optionD...
后台常用的收缩菜单效果
wuzhencheng的专栏
07-21 826
<br />function StringBuffer() { <br />this.strings =new Array; <br /> } <br /><br /> StringBuffer.prototype.append =function (str) { <br />this.strings.push(str); <br /> } <br /><br /> StringBuffer.prototype.toString =function() { <br />r
jquery - 左边栏菜单隐藏/显示
somous_ly的专栏
08-07 1158
html>   head>   title>jquery - 左边栏菜单隐藏/显示title>   script type="text/javascript" src="jquery-1.4.4.min.js" >script>   script>     $(document).ready(function(){          /** 通过点击展开左边栏 **/       
JS-常用功能
最新发布
qq_40950398的博客
10-18 199
汇总一些常用的js功能
使用jQuery-Easyui创建多级菜单的后台实现
"jQuery-Easyui 是一个基于 jQuery 的轻量级前端框架，它提供了丰富的组件，包括多级菜单在内，使得开发人员能够快速构建用户界面。此资源主要涉及如何在前后台实现jQuery-Easyui的多级菜单功能。" 在jQuery-Easyui...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值