效果：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. 分享我们项目中基于EF事务机制的架构

    写在前面: 1. 本文中单元测试用到的数据库,在执行测试之前,会被清空,即使用空数据库. 2. 本文中的单元测试都是正确通过的. 要理解EF的事务机制,首先要理解这2个类:TransactionSco ...

  2. WPF+通过配置文件生成菜单（Menu）+源码

    这个月做项目,遇到过一个通过配置文件来生成菜单的解决方案,感觉挺优雅的,特地放到博客园来,以飨读者. 说来惭愧,以前做的项目都没有这样用过,都是固定死了.如果后续有需要加入菜单,还得在重新修改UI,然 ...

  3. Android学习第三天-签名常用命令

    由于怕篇幅过长,所以把这个打包常用命令分开成两篇博文来进行讲解,下面我们直接进入主题吧. 8.keytool 这是我们JDK自带的密钥和证书管理工具 命令: -certreq 生成证书请求 -chan ...

  4. [ASP.NET MVC 小牛之路]10 - Controller 和 Action (2)

    继上一篇文章之后,本文将介绍 Controller 和 Action 的一些较高级特性,包括 Controller Factory.Action Invoker 和异步 Controller 等内容. ...

  5. [ASP.NET MVC 小牛之路]17 - 捆绑(Bundle)

    本文介绍 MVC 4 提供的一个新特性:捆绑(Bundle),一个在  View 和 Layout 中用于组织优化浏览器请求的 CSS 和 JavaScript 文件的技术. 本文目录 了解VS默认加 ...

  6. SVN代码冲突解决方案小集合

    对于刚接触svn的人来说,svn冲突后,不能提交是件让人很郁闷的事情.最让人郁闷的事,是代码间的覆盖.你把我代码盖了,我会很火大的.谁把谁的盖了都不爽. 为什么会出现代码冲突问题呢,因为不同的人,同时 ...

  7. LINQ系列：LINQ to SQL Join连接

    1. 一对多 var expr = context.Products .Where(p => p.Category.CategoryName == "LINQ to SQL" ...

  8. ClickOnce部署（1）：一些发布方式

    ClickOnce是什么玩意儿,这个问题嘛,在21世纪的互联网严重发达的时代,估计也没有必要大费奏章去介绍了,弄不好的话,还有抄袭之嫌.因此,有关ClickOnce的介绍,各位朋友可以直接查找MSDN ...

  9. File类使用小结

    一.构造函数 File(String pathname):根据参数转换为抽象路径名创建File实例 File(String parent,String filename):根据parent和filen ...

  10. 判断checkbox的checked状态（jQuery写法）

    $('#checkboxInput').click(function(){ if (this.checked){ $('.questionContainer').css({ "opacity ...