简单jQuery 实现手风琴菜单

css代码 如下:

	*{
margin: 0;
padding: 0;
}
#accordion{
width: 500px;
}
#accordion>div>p{
width: 500px;
text-align: center;
border: 1px solid #ccc;
}
#accordion>div>p>img{
width: 500px;
height: 190px;
}
#accordion>div>div{
width: 500px;
background: url("ss3.jpg") no-repeat;
background-size: 100%;
text-align: center;
line-height: 80px;
display: none;
border:0.5px solid #ccc; }
<div id="accordion">
<div>
<p>
<img src="wrs5.jpg">
</p>
<div>不要皱眉,即使在伤心的时刻,因为你从不知道有谁会醉心于你的笑容</div>
<div>千万别说直到永远,因为你压根不知道永远有多远。</div>
</div>
<div>
<p>
<img src="wrs2.jpg">
</p>
<div>你要努力,别因为生活,把自己变成一个low逼</div>
<div>过去的靠现在忘记,将来的靠现在努力,现在才最重要。</div>
</div>
<div>
<p>
<img src="wrs3.jpg">
</p>
<div>如果放弃太早,你永远都不知道自己会错过什么。</div>
<div>做一个有脑子的,别让说起你的人,只记得你是个没用的废人</div>
</div> </div>

jQuery代码(虽然看着不习惯,但比js少很多哦!)如下:

<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
/*$(document).ready(function(){
alert("hello jquery");
}); $(function(){
alert("hello jquery1");
});
window.onload=function(){
alert("hehe");
};*/
$("#accordion>div>p").click(function(){ $(this).nextAll().slideDown().end().parent().siblings().children("div").hide();
}); </script>

!一个做前端的妹子。

!喜欢挑战一切不可能。

!欢迎来骚扰。

!嘤嘤嘤。

简单jQuery 实现手风琴菜单的更多相关文章

  1. jQuery 实现手风琴菜单

    main.js $(function(){ var tmp = null, $title = $('.title'), $con = $('.title > ul'); $title.click ...

  2. jQuery垂直手风琴菜单 菜单项带小图标

    在线演示 本地下载

  3. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  4. JQuery -&gt; 超级简单的下拉菜单

    使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...

  5. jQuery手风琴菜单!!!!

    jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...

  6. 19款绚丽实用的jQuery/CSS3侧边栏菜单

    jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...

  7. 近20个绚丽实用的jQuery/CSS3侧边栏菜单(转载)

    http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...

  8. 11款样式新颖的 jQuery/CSS3 网页菜单

    今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...

  9. Angular.js+Bootstrap实现手风琴菜单

    说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...

随机推荐

  1. Spring 框架原理

    [spring框架原理] Spring框架原理 [博主]高瑞林 [博客地址]http://www.cnblogs.com/grl214 写给读者的话 ------亲爱的读者感谢您对小编的支持,当我正值 ...

  2. 运用google-protobuf的IM消息应用开发(前端篇)

    前言: 公司原本使用了第三方提供的IM消息系统,随着业务发展需要,三方的服务有限,并且出现问题也很难处理和排查,所以这次新版本迭代,我们的server同事呕心沥血做了一个新的IM消息系统,我们也因此配 ...

  3. eclipse如何安装插件

    eclipse安装插件以springsource-tool-suite为例 打开eclipse,找到help/About Eclipse/ 然后点击右下角图标 找到EclipsePlatform对应的 ...

  4. Java基础—JDK环境变量配置

    1.安装JDK 下载网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 注意点 ...

  5. opencv配置(win10+VS2015+opencv3.1)

    Step 1:准备工作 a.win10 b.vs2015 c.opencv3.1[从http://opencv.org/downloads.html下载] Step 2.开始安装 a. 双击openc ...

  6. java中的==、equals()、hashCode()源码分析

    转载自:http://www.cnblogs.com/xudong-bupt/p/3960177.html 在Java编程或者面试中经常会遇到 == .equals()的比较.自己看了看源码,结合实际 ...

  7. Redis基础学习(二)—数据类型

    一.Redis支持的数据类型 Redis中存储数据是通过key-value存储的,对于value的类型有以下几种: (1)字符串. (2)Map (3)List (4)Set   public cla ...

  8. java中GUI的awt和Swing的知识点

    刚刚学习了java的GUI,写了几个程序,基本熟悉了awt和Swing,下面和大家分享一下知识点 1.JFrame的层次结构 参考:http://tieba.baidu.com/p/200421612 ...

  9. Python练习册 第 0013 题: 用 Python 写一个爬图片的程序,爬 这个链接里的日本妹子图片 :-),(http://tieba.baidu.com/p/2166231880)

    这道题是一道爬虫练习题,需要爬链接http://tieba.baidu.com/p/2166231880里的所有妹子图片,点进链接看一下,这位妹子是日本著名性感女演员--杉本由美,^_^好漂亮啊,赶紧 ...

  10. kindeditor扩展粘贴图片功能&修改图片上传路径并通过webapi上传图片到图片服务器

    前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...