jquery实现左侧菜单 效果
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>左侧菜单</title>
<script type="text/javascript" src="js/jquery-3.0.0.min.js" ></script>
<script type="text/javascript" src="js/test.js" ></script>
<style>
* { padding:0; margin:0; } body { padding:100px; font:12px "宋体"; } .box { width:500px; border-bottom:1px solid #CCC; } .box h1 { height:30px; line-height:30px; padding:0 10px; font-size:12px; cursor:pointer; border:1px solid #ccc; border-bottom:none; background:#3c3c3c url(img/bg.gif) no-repeat right -27px; color:white} .box h1.hover { background-color:#9d9d9d; } .box h1.active { background-position:right 7px; } .box p { padding:10px; border-left:1px solid #ccc; border-right:1px solid #ccc; } </style> </style>
</head>
<body> <div class="box">
<h1>标题1</h1>
<p>Beauty without virtue is a rose without fragrance.无德之美犹如没有香味的玫瑰,徒有其表。</p>
<h1>标题1</h1>
<p>well begun,half done.好的开始等于成功的一半。</p>
<h1>标题1</h1>
<P>live not to eat,but eat to live.活着不是为了吃饭,吃饭为了活着。</P>
<h1>标题1</h1>
<p>It is hard to please all.众口难调。</p>
</div>
</body>
</html>
js
$(document).ready(function(){ $('.box h1:first').addClass('active'); $('.box p:not(:first)').hide(); $('.box h1').hover(function(){ $(this).addClass('hover');
},function(){ $(this).removeClass('hover'); }); $('.box h1').click(function(){ $(this).next('p').slideToggle().siblings('p').slideUp(); $(this).toggleClass('active') .siblings('h1').removeClass('active'); }); });
图片:
效果:
2017-09-25 09:44:24
jquery实现左侧菜单 效果的更多相关文章
- 翻遍互联网都找不到的解决方案,一行代码轻松实现 Gitbook 默认折叠左侧菜单效果
Gitbook 是一款产品文档构建工具,也可以用于构建个人博客,默认情况下电脑端访问时左侧菜单是展开状态,可偏偏有人想要实现默认折叠效果,于是诞生了这篇文章! 善良的我选择帮助别人 可能是网上关于 G ...
- jquery 仿windows10菜单效果下载
http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载
- python : jquery实现左侧菜单
左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...
- JQuery之左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项
权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...
- jQuery Wheel 环形菜单插件5种效果演示
很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...
- jquery左侧菜单
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读
关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...
- C# WPF 左侧菜单右侧内容布局效果实现
原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...
随机推荐
- Python 语音识别
调用科大讯飞语音听写,使用Python实现语音识别,将实时语音转换为文字. 参考这篇博客实现的录音,首先在官网下载了关于语音听写的SDK,然后在文件夹内新建了两个.py文件,分别是get_audio. ...
- 网路编程和并发:2.什么是C/S和B/S架构?
1.C/S 架构 客户端和服务器之间的架构.Client-Server也称客户机服务器模型. 在Client/Server结构的系统中,应用程序分为客户端和服务器两点部分,客户端为每个用户所有,服务器 ...
- SpringMvc处理模型数据(也就是从数据库中查询出来的数据放到请求域中)
这讲的是从数据库中查询到的数据,存放到请求域中.然后页面上直接可以从请求域中获取值. 有4种方式: 1):ModelAndView 是作为一个对象. /** * 目标方法的返回值可以是 Model ...
- HTML基础知识笔记摘要
HTML互联网三大基石:1.HTML:显示数据2.HTTP:传输数据 http传输协议3.URL:定位数据协议://ip地址或主机名:端口/网络中的内容... HTML(hyper text make ...
- Git中的分支
具体请参考:https://git-scm.com/book/zh/v1/Git-%E5%88%86%E6%94%AF-%E4%BD%95%E8%B0%93%E5%88%86%E6%94%AF Git ...
- [HDU4969]Just a Joke
题目:Just a Joke 传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4969 分析: 呀,根本不会做,5555~(逃 http://blog.cs ...
- SyntaxError: missing ] after element list
在前端页面js报错,找了很久没找到原因. 后来发现是后台向前端输出json字符串,而前端接收是html格式,需要将后台json字符串改成正常字符串就可以输出,或者通过ajax的方式接收json字符串.
- linux系统中查看日志及系统信息
cat tail -f 日 志 文 件说 明 /var/log/message系统启动后的信息和错误日志,是Red Hat Linux中最常用的日志之一 /var/log/secure与安全相关的日志 ...
- jquery 合并两个 json 对象
jQuery.extend( [ deep ], target, object1, [ objectN ] )合并对象到第一个对象 //deep为boolean类型,其它参数为object类型 var ...
- 显示等待WebDriverWait+EC
参考:https://www.cnblogs.com/yoyoketang/p/6538505.html 百度搜索关键字,等待搜索结果页面显示完成后,验证搜索结果的第一条记录 通过WebDriverW ...