当前位置:首页 > 日记 > 正文

对手机端折叠菜单的作用SlideToggle+slideup实现

对手机端折叠菜单的作用SlideToggle+slideup实现
折叠菜单效果,有许多插件在线,如引导崩溃,很好用也很简单,但如果你不使用Bootstrap框架,它会造成很多不必要的麻烦,如默认样式修改,代码冗余等等,一般有基于jQuery的许多在线的插件,但也太乏味,今天我要告诉你,使用jQuery内置的功能,要达到这个效果,如果不多,直接在代码:

HTML的一部分:

绿色校园

篮球场
篮球场
篮球场
篮球场
篮球场

绿色校园

篮球场
篮球场
篮球场
篮球场
篮球场
篮球场

绿色校园

篮球场
篮球场
篮球场
篮球场
篮球场
篮球场

CSS部分:
体{
背景:# dddddd;
}
内{。
背景:# FFF;
宽度:100%;
溢出:隐藏;
列表样式:无;
保证金:0;
填充:0;
}
inner_title {。内。
背景颜色:# FFF;
宽度:100%;
填充:2.5%;
底部边框:1px solid # efefef;
颜色:# 343434;
身高:40px;
行高:40px;
字体大小:16px;
职位:相对;
}
{ inner.inner_title跨度。
位置:绝对;
宽度:20px;
身高:20px;
顶部:50%;
边距:- 10px;
权利:6%;
背景:URL(图像/ arow_left。png)没有重复的中心;
}
。内。inner_title主动{。
颜色:# 4db780;
}
{ inner.inner_title.active跨度。
背景:URL(图像/ arow_down。png)没有重复的中心;
}
两级分类处理弹出
inner_style {。内。
保证金:0;
列表样式:无;
宽度:100%;
背景颜色:# efefef;
溢出:隐藏;
填料:15px 3%;
}
inner.inner_style李{。
浮点数:左;
颜色:# 333;
字体大小:14px;
宽度:21%;
文本对齐:中心;
行高:30px;
保证金权利:5%;
}

js部分(记得介绍jQuery):
折叠效果***处理
(函数($){)
美元。fn.fold =功能(选项){
默认参数设置
var设置{ {
300速度:折叠速度(速度慢)
}
非空合并参数
如果(选项)
扩展(设置,选项);

遵循链法则
返回this.each(函数(){()
对于每个LI元素绑定/单击事件
$()>李
$(this)Bind(单击
在单击之前,当前菜单的第一个判断是折叠的。
如果($(this)。HasClass(主动的)){ / /折叠状态
$(。内OL)。SlideUp('500)(slideup); / /使用折叠的其他选项
$(这)。RemoveClass(主动的); / /删除选定的样式
}其他打开状态
$(这),兄弟姐妹(李的)RemoveClass(主动的);
$(。内OL)。SlideUp('500)(slideup); / /使用折叠的其他选项
$(这)。AddClass(主动的) / /添加样式
$(这)。下(OL)。SlideToggle(设置。速度);
}
});
});
折叠/默认
$()>
});
}
}(jQuery);
$(
结果如下:
以上是本文的全部内容,希望能对您有所帮助,希望大家多多支持。

相关文章

实现价格vue.js格式化的方法

实现价格vue.js格式化的方法

方法,格式化,价格,电脑软件,js,这是一种常见的价格格式化方法,在电子商务的价格处理中非常实用,我们可以看到效果。 这里,使用了价格数据的过滤器,并用保留的小数点处理价格。 HTML 这里是转弯的价格数据} js 筛选器:数据筛选器 格式:函数(值){ V…

使用redis数据库缓存数据Node.js的

使用redis数据库缓存数据Node.js的

数据库缓存,方法,数据,电脑软件,redis,1。运行redis Redis服务器使用默认的6379端口 Redis服务器 自定义端口 Redis服务器端口6390 顾客 使用CLI 指定IP和端口连接 使用CLI - H - P 6390 127.0.0.1 测试客户端和服务器是否连接。 发出砰…

js绘制圆形时钟的效果

js绘制圆形时钟的效果

绘制,时钟,效果,电脑软件,js,这个例子为大家分享js的画布循环时钟的具体实现代码,供大家参考,具体内容如下 帆布的时钟 div { 文本对齐:中心; 边距:250px; } #钟{ 边境:1px solid # CCC; } js VaR DOM = document.getelementbyid(开始的); VaR CXT …

使用原js实现简单的复选框功能

使用原js实现简单的复选框功能

复选框,简单,功能,电脑软件,js,废话没多说,直接给大家粘上代码,具体代码如下所示: 非所有权文件 选择 查找/选择按钮 无功ochkallbtn = document.getelementbyid('cheakall); 无功odiv = document.getelementsbytagname('div){ 0 }; 无功ainput…

vue.js实现刷新当前页面的方法教程

vue.js实现刷新当前页面的方法教程

方法,教程,刷新,页面,电脑软件,前言 Vue.js(是一组用于构建用户界面。增量框架不像其他重量级框架,Vue采用底发展设计。Vue核心库集中在视图层、数据驱动的前端框架 当我们开发Vue页,我们有时会遇到需要刷新当前页面的功能。然而,在Vue框架带…

PS图象处理软件技术:选择与ALT锁定

PS图象处理软件技术:选择与ALT锁定

图象处理,锁定,选择,软件技术,电脑软件,当你不想移动它时,大部分锁定图层,但是有时候我需要移动它,可能是因为太多的图层要找,即使选中直接选中也不能选择锁定,这个时候只要按住map层,Alt键点击就可以锁定在画布上了。不仅如此,事实上,锁定层仍然可…

如何excel2010快速选择方法步骤为

如何excel2010快速选择方法步骤为

快速选择,步骤,方法,地区,电脑软件,In the excel if the data rows or columns is very large, for example, about 5000 lines of data, to start from A1 to E5000 in addition to use the mouse to drag the selected choice, there is …

PS图象处理软件使用的插件使景区美

PS图象处理软件使用的插件使景区美

软件使用,图象处理,插件,景区,意境,通常我们可以看到两种不同的风景,一个是自己眼中的风景,一个是在别人眼里的风景。我们总是感叹,在影片中呈现的图片都很大气,和回到现实,想知道为什么他们不能使自己的思想,但你有没有想过你可能被欺骗,当你看到…

用CSS属性实现透明的各种三角形示

用CSS属性实现透明的各种三角形示

三角形,属性,透明,示例代码,电脑软件,结果如下 示例代码 * { 保证金:0; 填充:0; } 箱{。 保证金:40px汽车; 宽度:60px; 背景颜色:# f0ac6b; } T1 {。 保证金:40px汽车; 宽度:0px; 身高:0px; / *背景颜色:* # f0ac6b; 底部边框:40px固体红; 边境:20px固体透明; 左…

AI创建一个无缝拼贴背景图案的夏季

AI创建一个无缝拼贴背景图案的夏季

游泳池,创建一个,夏季,图案,背景,今天,萧边将与你分享爱的方式创造夏天池的主题无缝拼贴。这个教程很实用。喜欢的朋友,可以参考这篇文章,希望大家喜欢。 在游泳池的生活是更好的舒适的夏天,我们学习这门课程,你将学习如何创建一个无缝泳池的主…

Dreamweaver如何向网页添加下拉栏

Dreamweaver如何向网页添加下拉栏

网页,电脑软件,Dreamweaver,在网页制作中,我们经常需要设置一个滚动条。当页面打开时,滚动条将自动下降到最后。如图所示,此滚动条可以放置图片、广告或公告等,并学习如何设置。 软件名称:Adobe Dreamweaver CC 2017 v17.0中文破解版(附破解补丁…

js实现了右键自定义菜单。

js实现了右键自定义菜单。

自定义菜单,右键,实现了,电脑软件,js,这个例子为大家分享了右键自定义菜单的具体代码,供大家参考,具体内容如下 { #菜单 身高:200px; 宽度:50px; border: 1px solid灰色; 背景颜色:Antiquewhite; 填料:10px; 显示:无; 位置:绝对; } Ul, {李 保证金:0; 填充:0…