简单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 -&amp;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. SecureCRT 常用命令

    常用命令:一.ls 只列出文件名 (相当于dir,dir也可以使用) -A:列出所有文件,包含隐藏文件. -l:列表形式,包含文件的绝大部分属性. -R:递归显示. --help:此命令的帮助. 二. ...

  2. CentOS下SNMP的安装与使用

    CentOS下SNMP的安装与使用   导读 简单网络管理协议(SNMP),由一组网络管理的标准组成,包含一个应用层协议(application layer protocol).数据库模型(datab ...

  3. 云端卫士实战录 | Java高级特性之多线程

    <实战录>导语 一转眼作为一名Java开发者已经四年多时间了,说长不长说短不短,对于java的感情还是比较深的,主要嘛毕竟它给了我饭吃.哈哈,开个玩笑.今天我想借此机会来和大家聊聊Java ...

  4. [原创]PCB知识补充

    近期又要使用Altium进行PCB板的绘制,算起来从大学课上第一次接触Protel99SE到现在已经算是半个熟练工了.不过现在想来还是能回忆起第一次使用的情景,对着一幅简单的原理图使用着自动连线的功能 ...

  5. Quartz 框架的应用

    本文将简单介绍在没有 Spring 的时候..如何来使用 Quartz... 这里跳过 Quartz 的其他介绍.如果想更加输入的了解 Quartz,大家可以点击下载Quartz的帮助文档. Quar ...

  6. SQL迁移到ORACLE实例

    nohup ./command.sh > output 2>&1 & SQL迁移到ORACLE实例 日常运维中,我们经常会有数据库不同类型的迁移,比较多的就是从sql se ...

  7. 使用Github搭建个人博客网站

    1 新建一个repo,创建一个没有父节点的分支gh-pages(github规定,只有该分支中的页面,才会生成网页文件): mkdir jekyll_demo cd jekyll_demo git i ...

  8. ftp_get_file_and_directory

    class DirectoryItem { public Uri BaseUri; public string AbsolutePath { get { return string.Format(&q ...

  9. redis 初识

    架构 sharding redis 集群是主从式架构,数据分片是根据hash slot(哈希槽来分布) 总共有16384个哈希槽,所以理论上来说,集群的最大节点(master) 数量是16384个.一 ...

  10. i3wm 调节音量

    i3wm,设置调节音量的快捷键 configure file: ~/.config/i3/config add # for sound control bindsym XF86AudioRaiseVo ...