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 ...
随机推荐
- .NET面试题集锦①
一.前言部分 文中的问题及答案多收集整理自网络,不保证100%准确,还望斟酌采纳. 1.面向对象的思想主要包括什么? 答:任何事物都可以理解为对象,其主要特征: 继承.封装.多态.特点:代码好维护,安 ...
- APP前置代码
APP自动化前置代码: #导入包from appium import webdriverimport timedesired_caps = {}desired_caps['platformName'] ...
- 多次读取HttpEntity内容
有时,需要重复读取HttpEntity,直接使用是行不通的,这时需要使用BufferedHttpEntity类将其进行包装一下. public static void main(String[] ar ...
- springmvc REST风格的URL
1:需要配置一个filter <!-- 配置 org.springframework.web.filter.HiddenHttpMethodFilter: 可以把 POST 请求转为 DELET ...
- manacher 和 扩展KMP
manacher 和 扩展KMP 事实上,这两个东西是一样的. 考虑 manacher 的过程 我们实时维护最远扩展的位置 \(mx\) 以及这个回文串的回文中心 \(l\) ,那么显然当然位置如果没 ...
- C# 简单软件有效期注册的实现
◆需求:公司一直以来对开发的产品都没有进行使用时间的控制,要么就是将日期限制写死在程序里面,每次都要编译新程序再发给客户,很不方便.于是公司让我写个模块,要求如下:1.无论哪个新开发的程序只要调用这个 ...
- vue 中使用scss
1.下载 npm install --save-dev sass-loader npm install --save-dev node-sass npm install sass-loader --s ...
- HihoCoder 1055 刷油漆 (树上背包)
题目:https://vjudge.net/contest/323605#problem/A 题意:一棵树,让你选择m个点的一个连通块,使得得到的权值最大 思路:树上背包,我们用一个dp数组,dp[i ...
- [bzoj3462]DZY Loves Math II (美妙数学+背包dp)
Description Input 第一行,两个正整数 S 和 q,q 表示询问数量. 接下来 q 行,每行一个正整数 n. Output 输出共 q 行,分别为每个询问的答案. Sample Inp ...
- 简单数学算法demo和窗口跳转,关闭,弹框
简单数学算法demo和窗口跳转,关闭,弹框demo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN&quo ...