简单jQuery 实现手风琴菜单

时间:2021-07-08 17:42:14

简单jQuery 实现手风琴菜单

简单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 实现手风琴菜单的更多相关文章

  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&semi;gt&semi; 超级简单的下拉菜单

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

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

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

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

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

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

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

  8. 11款样式新颖的 jQuery&sol;CSS3 网页菜单

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

  9. Angular&period;js&plus;Bootstrap实现手风琴菜单

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

随机推荐

  1. 使用gulp插件来自动刷新页面。

    http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...

  2. 笔记本&lowbar;thinkpad&lowbar;e40&lowbar;FN

    1. 开机时按F10进入bios 然后在 bios 中选择 system configuration,看一下其中的 action keys mode .如果此选项后面为 enable 的话,是不需要按 ...

  3. &lbrack;转&rsqb;ASP&period;NET MVC Spring&period;NET NHibernate 整合

    请注明转载地址:http://www.cnblogs.com/arhat 在整合这三个技术之前,首先得说明一下整合的步骤,俗话说汗要一口一口吃,事要一件一件做.同理这个三个技术也是.那么在整合之前,需 ...

  4. ZOJ3762 The Bonus Salary&excl;&lpar;最小费用最大流&rpar;

    题意:给你N个的任务一定要在每天的[Li,Ri]时段完成,然后你只有K天的时间,每个任务有个val,然后求K天里能够获得的最大bonus. 思路:拿到手第一直觉是最小费用最大流,然后不会建图,就跑去想 ...

  5. 数据类型和Json格式&lbrack;转&rsqb;

    1. 前几天,我才知道有一种简化的数据交换格式,叫做yaml. 我翻了一遍它的文档,看懂的地方不多,但是有一句话令我茅塞顿开. 它说,从结构上看,所有的数据(data)最终都可以分解成三种类型: 第一 ...

  6. MySQL新建用户&comma;授权&comma;删除用户&comma;修改密码总结

    首先要声明一下:一般情况下,修改MySQL密码,授权,是需要有mysql里的root权限的. 注:本操作是在WIN命令提示符下,phpMyAdmin同样适用. 用户:rdingcn 用户数据库:rdi ...

  7. onkeyup事件只能输入数字,字母,下划线

    <input type="text" onkeyup="value=value.replace(/[\W]/g,'')"/>

  8. java基础之路(二)上

    &和&&的区别 我们今天就来说一下&与&&运算符的区别 &运算符有两种用法:(1)按位与:(2)逻辑与.&&运算符是短路与运算. ...

  9. Python Queue&lpar;队列&rpar;

    Queue模块实现了多生产者.多消费者队列.当必须在多个线程之间安全地交换信息时,它在线程编程中特别有用,实现了所有必需的锁定语义. 一.该模块实现了三种类型的队列,它们的区别仅在于检索条目的顺序: ...

  10. rpmlib&lpar;PayloadIsLzma&rpar; &lt&semi;&equals; 4&period;4&period;6-1 is needed【转载】

    以下为转载,但是有改动,原作者在一处写错了,将高写成了低,直接差之毫厘,谬之千里. 环境: centos el5 背景: 由于个人比较喜欢用软件的最新版本,在重新安装服务器上的 xdg-open(还有 ...