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实现左侧菜单 效果的更多相关文章

  1. 翻遍互联网都找不到的解决方案,一行代码轻松实现 Gitbook 默认折叠左侧菜单效果

    Gitbook 是一款产品文档构建工具,也可以用于构建个人博客,默认情况下电脑端访问时左侧菜单是展开状态,可偏偏有人想要实现默认折叠效果,于是诞生了这篇文章! 善良的我选择帮助别人 可能是网上关于 G ...

  2. jquery 仿windows10菜单效果下载

    http://www.kuitao8.com/20150923/4079.shtml jquery 仿windows10菜单效果下载

  3. python : jquery实现左侧菜单

    左侧菜单 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3 ...

  4. JQuery之左侧菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. 权限模块_使用权限_实现主页面的效果_显示左侧菜单&只显示有权限的菜单项

    权限模块__使用权限__实现主页面的效果 HomeAction.java public class HomeAction extends ActionSupport { public String i ...

  6. jQuery Wheel 环形菜单插件5种效果演示

    很酷的菜单-jQuery Wheel 环形菜单插件5种效果演示在线预览 下载地址 实例代码 <div class="container"> <!-- Top Na ...

  7. jquery左侧菜单

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 亚马逊左侧菜单延迟z三角 jquery插件jquery.menu-aim.js源码解读

    关于亚马逊的左侧菜单延迟,之前一直不知道它的实现原理.梦神提到了z三角,我也不知道这是什么东西.13号那天很有空,等领导们签字完我就可以走了.下午的时候,找到了一篇博客:http://jayuh.co ...

  9. C# WPF 左侧菜单右侧内容布局效果实现

    原文:C# WPF 左侧菜单右侧内容布局效果实现 我们要做的效果是这样的,左侧是可折叠的菜单栏,右侧是内容区域,点击左侧的菜单项右侧内容区域则相应地切换. wpf实现的话,我的办法是用一个tabcon ...

随机推荐

  1. JavaScript的MD5加密

    1.首先要到http://pajhome.org.uk/crypt/md5/下载js文件. 2.在页面文件中添加: <script type="text/javascript" ...

  2. spring依赖搜索

    spring项目在启动时,spring框架会根据名称自动搜索实现类. 这在日常开发中还是很有用的. 下面举两个例子. 1. 先写一个接口(或者抽象类) public interface IPerson ...

  3. nofollow标签的作用 nofollow标签添加方法

    这篇文章主要介绍了nofollow标签的作用 nofollow标签添加方法,需要的朋友可以参考下   nofollow标签的作用 nofollow标签添加方法  模拟搜狗蜘蛛   nofollow标签 ...

  4. APP开发者如何从应用程序中赚钱？

    付费应用程序,这是应用程序最基本的赚钱方式之一,也是拥有巨大潜力的赚钱方式之一.但有一个问题开发者必须扪心自问,您的程序用户是否有一批粉丝级用户的认可,或对您应用程序品牌的认可   蝉大师APP推广工 ...

  5. 专为渗透测试人员设计的 Python 工具大合集

    如果你对漏洞挖掘.逆向工程分析或渗透测试感兴趣的话,我第一个要推荐给你的就是Python编程语言.Python不仅语法简单上手容易,而且它还有大量功能强大的库和程序可供我们使用.在这篇文章中,我们会给 ...

  6. phpredis报错信息：protocol error, got 'o' as reply type byte解决方案

    今天在前端调用PHP的接口时,有报错信息为:protocol error, got 'o' as reply type byte另外此错误有几率会重现,并不是必现的.十分疑惑,遂百度一下,发现是red ...

  7. 如何在Oracle中建表空间、建用户并导入dmp文件详解

    假设oracle有个全新的数据库orcl,现在要把数据库文件(.dmp)导入这个全新的数据库orcl中.详细步骤如下:    1. 创建表空间  例如:  create tablespace test ...

  8. getAttribute 与getParmeter 区别

    1.getAttribute是取得jsp中 用setAttribute設定的attribute 2.parameter得到的是string:attribute得到的是object 3.request. ...

  9. [题解]Shorten IPv6 Address-模拟（2019牛客多校第六场B题）

    题目链接:https://ac.nowcoder.com/acm/contest/886/B 题意: 您将获得一个IPv6地址,该地址是128位二进制字符串.请根据以下规则确定其最短的表示: 以十六进 ...

  10. js中的attributes和Attribute的用法和区别。

    一:Attribute的几种用法和含义(attributes和Attribute都是用来操作属性的) getAttribute:获取某一个属性的值: setAttribute:建立一个属性,并同时给属 ...