效果：http://hovertree.com/texiao/jquery/65/

效果图：

手机扫描二维码查看效果：

代码：

<!doctype html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>jQuery扁平UI设计垂直手风琴特效 - 何问起</title><base target="_blank" />

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/65/css/normalize.css" />

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/65/css/demo.css">

<!--必要样式-->

<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/65/css/style.css">

</head>

<body>

<div class="accordion">

<div class="item">

<img src="http://hovertree.com/texiao/jquery/65/img/Location-Pin.png" alt="">

<h3>Location</h3>

</div>

<p>您正在何问起特效库。<a href="http://hovertree.com/">首页</a> - <a href="http://hovertree.com/texiao/">特效库</a> - <a href="http://hovertree.com/texiao/jquery/65/">手风琴</a></p>

<div class="item">

<img src="http://hovertree.com/texiao/jquery/65/img/Headphones.png" alt="">

<h3>Music</h3>

</div>

<p>好听音乐。<audio controls="controls" src="http://cms.hovertree.com/hovertreesound/hwqxnl.mp3"></audio></p>

<div class="item">

<img src="http://hovertree.com/texiao/jquery/65/img/Lightbulb.png" alt="">

<h3>Notes</h3>

</div>

<p>受到网店的影响，<a href="http://hovertree.com/h/bjaf/6sm1esjw.htm">服装店</a>的生意逐渐有所下降，老板找何问起去谈，大概是准备跟上网购潮流，让何问起准备一下， 要在网上开网店，要为服装店建立网站。</p>

<div class="item">

<img src="http://hovertree.com/texiao/jquery/65/img/Bookmarks.png" alt="">

<h3>Books</h3>

</div>

<p>电子书：<br /><a href="http://hovertree.com/h/bjaf/246k8ygw.htm">http://hovertree.com/h/bjaf/246k8ygw.htm</a>

<br /><a href="http://hovertree.com/h/bjaf/dianzishu.htm">电子书特效</a></p>

<div class="item">

<img src="http://hovertree.com/texiao/jquery/65/img/Lightning-Bolt.png" alt="">

<h3>Tendances</h3>

</div>

<p>燃烧吧 何问起 <a href="http://hovertree.com/h/bjaf/xmrvjvng.htm">看看</a></p>

</div>

<div class="hovertreeinfo"><a href="http://hovertree.com/h/bjaf/vk9yjrpm.htm">原文</a> <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a></div>

<script src="http://down.hovertree.com/jquery/jquery-1.12.3.min.js" type="text/javascript"></script>

<script type="text/javascript">

(function ($) {

'use strict';

$('.item').on("click", function () {

$(this).next().slideToggle(100);

$('p').not($(this).next()).slideUp('fast');

});

}(jQuery));

</script>

</body>

</html>

转自：http://hovertree.com/h/bjaf/vk9yjrpm.htm

特效：http://www.cnblogs.com/roucheng/p/texiao.html

jQuery实现手机竖直手风琴效果的更多相关文章

  1. 基于 jQuery 实现垂直滑动的手风琴效果

    今天我们要与大家分享一个漂亮而灵活的垂直 jQuery 手风琴效果.其主要思想是扩大手风琴片上的点击和显示更多的信息.其他内容片段将变得不那么透明.当使用一个导航箭头导航下一个片段,新的片会从顶部或底 ...

  2. jQuery插件实例五：手风琴效果[动画效果可配置版]

    昨天写了个jQuery插件实例四:手风琴效果[无动画版]那个是没有动画效果的,且可配置性不高,本篇为有动画效果.对于一些数据做了动态的计算,以实现自适应. 欢迎大家入群相互交流,学习,新群初建,欢迎各 ...

  3. 使用 jQuery & CSS3 实现优雅的手风琴效果

    手风琴效果常用于切换显示一组内容,这种方式既可以节省网页空间又可以有动画效果.今天,我们将创造一个优雅的手风琴内容效果.这个想法是有悬停时滑出一些垂直手风琴标签.我们将添加一些 CSS3 属性来提升外 ...

  4. jquery 仿手机屏幕切换界面效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. jQuery插件实例四：手风琴效果[无动画版]

    手风琴效果就是内容的折叠与打开,在这个插件中,使用了三种数据来源:1.直接写在DOM结构中:2.将数据写在配置项中:3.从Ajax()中获取数据.在这一版中,各项的切换没有添加动画效果,在下一版中会是 ...

  6. jQuery点击收缩展开滑动显示内容竖直手风琴代码

    <div class="position"> <div class="positiontop"> <span class=&quo ...

  7. numpy基础教程--对数组进行水平拼接和竖直拼接

    在处理数组的时候经常要用到拼接,numpy中有两个非常实用的函数,可以快捷对数组进行拼接 1.hstack(tup)函数可以接收维度相同的数组,进行水平拼接. 2.vstack(tup)用来竖直拼接 ...

  8. jQuery效果之简单的手风琴效果

    实现效果如图所示: html结构: <div class="item_box box10"> <div class="item_box_wp" ...

  9. 基于jquery横向手风琴效果

    基于jquery横向手风琴效果是一款基于jquery实现的左右滑动手风琴图片轮播切换特效.效果图如下: 在线预览   源码下载 效果图如下: <div class="flash&quo ...

随机推荐

  1. UI控件（UIAlertController）

    @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UIButton *_button = [UIBut ...

  2. 微信为什么发布 Mac 版？

    因为 Mac 就是好啊就是好啊,就是好…… 打完收工,谢谢,鼓掌 piapiapia……晚安! 这么写在京城行走会不会挨板砖呢?头像已经印到书上满世界的发出去了,虽然考虑到行走江湖求一个稳字,我还特意 ...

  3. jQuery AJAX 网页无刷新上传示例

    新年礼,提供简单.易套用的 jQuery AJAX 上传示例及代码下载.后台对文件的上传及检查,以 C#/.NET Handler 处理 (可视需要改写成 Java 或 PHP). 有时做一个网站项目 ...

  4. Module-Zero之发布说明

    返回<Module Zero学习目录> ABP v0.7.6.0 创建组织单元系统. 升级了nuget包. 小修复和改进. 注意: AbpUserManager的构造函数更新了.添加了组织 ...

  5. PHP面向对象笔记

    一.构造函数.析构函数(1)构造函数:__construct()说明:对象被实例化时调用,可带参数例: $obj = new A($a,$b); (2)析构函数:_destruct()说明:页面执行结 ...

  6. Java接口和抽象类的区别

    今天看到项目中,写了一个抽象类,里面有很多方法继承了这类,当调用这个接口时,采用的是这个抽象类去调方法的,当时一想,这个不就是我们说的Java的多态的特征: 继承:存在继承关系的子类和父类 重写:子类 ...

  7. Distributed2：Linked Server Login 添加和删除

    一,通过 sys.sp_addlinkedsrvlogin 创建Linked Server的Login 当在local Server 上需要访问Linked Server时,Local Server ...

  8. 获取URL最后一个 ‘/’ 之后的字符

    在开发项目的过程中,经常遇到需要解析论坛,博客等的URL的问题,比如:'abc/def/jkl' 或 'abc/def/jkl/',获取最后一个‘/’之后的所有字符‘jkl’,由于特殊字符'/'的个数 ...

  9. jQuery控制tabs打开的数量

  10. java获取类的信息

    关键技术剖析 1.java.lang.reflect包实现了java的反射机制,在使用反射机制时,需要导入该包. 2.Class类的forName方法能够根据类名加载类,获得类的Class对象. Cl ...