js实现收缩菜单效果
废话不多说,直接上代码: 有注释
<head>
<title></title>
<style type="text/css">
div
{
border: 1px solid black;
width: 100px;
}
ul .tit, .content
{
list-style-type: none;
}
.menu
{
padding: 0px;
margin: 0px;
}
.tit
{
background-color:#0094ff;
color:White;
padding:2px 10px;
cursor:pointer;
}
</style>
<script src="js/jquery-1.9.0.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//一开始直接隐藏菜单
$(".content").hide();
//给标题添加点击事件
$(".tit").click(function () {
//当点击的时候,打开菜单,同时其他的菜单隐藏
$(this).next().slideDown().parent().siblings().children(".content").slideUp();
}).first().next().slideDown();//默认之后第一个菜单打开
});
</script>
</head>
<body>
<div>
<ul class="menu">
<li class="tit">菜单1</li>
<li class="content">
<ul>
<li>11111</li>
<li>11111</li>
<li>11111</li>
<li>11111</li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="tit">菜单2</li>
<li class="content">
<ul>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="tit">菜单3</li>
<li class="content">
<ul>
<li>22222</li>
<li>22222</li>
<li>22222</li>
<li>22222</li>
</ul>
</li>
</ul>
</div>
</body>
js实现收缩菜单代码
js实现收缩菜单效果的更多相关文章
- JS实战 · 收缩菜单表单布局
获取节点的两种方式: 1.通过event对象的srcElement属性: 2.通过事件源对象用this传入. 代码如下: <html> <head> ...
- js实现环形菜单效果
点击中间的圆点,会弹出环形菜单,效果图: 代码: <!DOCTYPE html> <html> <head> <meta charset="UTF- ...
- js之展开收缩菜单，用到window.onload ,onclick,
目标效果:点击标签1,如果列表标签的style的display是block,改成none,否则改成block,来达到展开收缩菜单效果 一.准备阶段 html文件 <!DOCTYPE html&g ...
- 原生JS通过勾股定理计算苹果菜单效果
JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...
- 原生JS实现苹果菜单
今天分享下用原生JS实现苹果菜单效果,这个效果的重点有以下几点 图标中心点到鼠标的距离的算法 利用比例计算图标的宽度 代码地址:https://github.com/peng666/blogs/blo ...
- 用js枚举实现简易菜单效果
用js枚举实现简易菜单效果,左侧显示菜单,右侧显示用户选择的菜单,一图胜千言,还是直接来张效果图吧: 以下是代码: <DOCTYPE html> <html> <head ...
- Js实现京东无延迟菜单效果(demo)
一个端午节,外面人山人海,又那么热,我认为宅在家里看看慕课网,充实自己来的实际... 这是一个js实现京东无延迟菜单效果,感觉很好,分享给大家... 1.开发基本的菜单结构 2.开发普通的二级菜单效果 ...
- jQuery弹性展开收缩菜单插件gooey.js
分享一款基于jQuery弹性展开收缩菜单插件gooey.js.这是一款基于gooey.js插件实现的弹性菜单特效代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <hea ...
- js下拉框二级关联菜单效果代码具体实现
这篇文章介绍了js下拉框二级关联菜单效果代码具体实现,有需要的朋友可以参考一下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transit ...
随机推荐
- 中国首个 SaaS 模式的云告警平台安卓版 APP 上线
今年一月底,国内首个 SaaS 模式的云告警平台 OneAlert 正式发布了 iOS 版 App 客户端,今天上午,安卓版 App 客户端也正式上线了!每个安卓用户,无需电脑,都可以通过手机全程跟踪 ...
- Nagios监控部署(转)
转自 http://kyhack.blog.51cto.com/490370/213355 ky.blog 一.nagios简介 nagios是一款用于系统和网络监控的应用程序,它可以在 ...
- 关于用 MySQL 存储 Emoji
http://www.v2ex.com/t/137724 如果你希望让你的网站或者 App 支持 Emoji,那么在初次设置 MySQL 时,有一些细节你需要知道. Emoji Emoji 字符的特殊 ...
- Web Api 入门
http://www.cnblogs.com/developersupport/p/WebAPI-Security.html http://www.cnblogs.com/r01cn/archive/ ...
- 李洪强iOS开发本人集成环信的经验总结_06_发送好友请求
李洪强iOS开发本人集成环信的经验总结_06_发送好友请求 同步好友请求 异步好友请求
- SPRING IN ACTION 第4版笔记-第九章Securing web applications-002-把用户数据存在memory里(AuthenticationManagerBuilder、 UserDetailsManagerConfigurer.UserDetailsBuilder)
Spring Security is extremely flexible and is capable of authenticating users against virtually any d ...
- Qt: 内建对话框（各种对话框都有了，且用到了qobject_cast解析sender的技术）
#include "BuiltinDialog.h" #include <QtGui/QTextEdit> #include <QtGui/QPushButton ...
- dynamic_cast 用法
dynamic_cast < type-id > ( expression ) 该运算符把expression转换成type-id类型的对象.Type-id必须是类的指针.类的引用或者vo ...
- sc.exe管理系统服务
sc.exe管理系统服务 下面介绍SC,SC QC,and SC QUERY sc.exe create HomerSatelliteDesktopGC binPath= "D:XXXXXX ...
- Android开发之ContentProvider的简单使用
ContentProvider,内容提供者 官网结构图: 作为四大组件之一的ContentProvider,主要是用于应用间数据共享使用的. ContentProvider把应用的数据封装起来,然后提 ...