简单jQuery 实现手风琴菜单
简单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 实现手风琴菜单的更多相关文章
- jQuery 实现手风琴菜单
main.js $(function(){ var tmp = null, $title = $('.title'), $con = $('.title > ul'); $title.click ...
- jQuery垂直手风琴菜单 菜单项带小图标
在线演示 本地下载
- jQuery简单的手风琴菜单
查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...
- JQuery -> 超级简单的下拉菜单
使用jquery实现一个超级简单的下拉菜单. 效果图 最初的效果 watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvRmVlTGFuZw==/font/5a6L ...
- jQuery手风琴菜单!!!!
jQuery手风琴菜单 第一次发博客也不知道说点什么好,以前敲得一个手风琴菜单刚刚整理出来了,就来分享个大家 手风琴的排版 排版完事了,接下来就写样式吧,把自己喜欢的颜色或者是图片添加进来,就会变成你 ...
- 19款绚丽实用的jQuery/CSS3侧边栏菜单
jQuery作为一款主流的JavaScript前端开发框架,深受广告开发者的亲睐,同时jQuery有着不计其数的插件,特别是菜单插件更为丰富,本文将要为大家介绍20个绚丽而实用的jQuery侧边栏菜单 ...
- 近20个绚丽实用的jQuery/CSS3侧边栏菜单(转载)
http://developer.51cto.com/art/201510/493530.htm 近20个绚丽实用的jQuery/CSS3侧边栏菜单 jQuery作为一款主流的JavaScript前端 ...
- 11款样式新颖的 jQuery/CSS3 网页菜单
今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...
- Angular.js+Bootstrap实现手风琴菜单
说是Angular.js+Bootstrap实现手风琴菜单,其实就是用了Bootstrap的样式而已. 上一篇实现了表格+分页,接着学习实现的Demo. 主要练习自定义指令,向指令中传递参数,老规矩先 ...
随机推荐
- Spring 框架原理
[spring框架原理] Spring框架原理 [博主]高瑞林 [博客地址]http://www.cnblogs.com/grl214 写给读者的话 ------亲爱的读者感谢您对小编的支持,当我正值 ...
- 运用google-protobuf的IM消息应用开发(前端篇)
前言: 公司原本使用了第三方提供的IM消息系统,随着业务发展需要,三方的服务有限,并且出现问题也很难处理和排查,所以这次新版本迭代,我们的server同事呕心沥血做了一个新的IM消息系统,我们也因此配 ...
- eclipse如何安装插件
eclipse安装插件以springsource-tool-suite为例 打开eclipse,找到help/About Eclipse/ 然后点击右下角图标 找到EclipsePlatform对应的 ...
- Java基础—JDK环境变量配置
1.安装JDK 下载网址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 注意点 ...
- opencv配置(win10+VS2015+opencv3.1)
Step 1:准备工作 a.win10 b.vs2015 c.opencv3.1[从http://opencv.org/downloads.html下载] Step 2.开始安装 a. 双击openc ...
- java中的==、equals()、hashCode()源码分析
转载自:http://www.cnblogs.com/xudong-bupt/p/3960177.html 在Java编程或者面试中经常会遇到 == .equals()的比较.自己看了看源码,结合实际 ...
- Redis基础学习(二)—数据类型
一.Redis支持的数据类型 Redis中存储数据是通过key-value存储的,对于value的类型有以下几种: (1)字符串. (2)Map (3)List (4)Set public cla ...
- java中GUI的awt和Swing的知识点
刚刚学习了java的GUI,写了几个程序,基本熟悉了awt和Swing,下面和大家分享一下知识点 1.JFrame的层次结构 参考:http://tieba.baidu.com/p/200421612 ...
- Python练习册 第 0013 题: 用 Python 写一个爬图片的程序,爬 这个链接里的日本妹子图片 :-),(http://tieba.baidu.com/p/2166231880)
这道题是一道爬虫练习题,需要爬链接http://tieba.baidu.com/p/2166231880里的所有妹子图片,点进链接看一下,这位妹子是日本著名性感女演员--杉本由美,^_^好漂亮啊,赶紧 ...
- kindeditor扩展粘贴图片功能&修改图片上传路径并通过webapi上传图片到图片服务器
前言 kindeditor是一个非常好用的富文本编辑器,它的简单使用我就不再介绍了. 而kindeditor却对图片的处理不够理想. 本篇博文需要解决的问题有两个: kindeditor扩展粘贴图片功 ...