这个也要进来看看哈。

记得加多个属性时的用法就可以了。

因为官网提供太多的SAPMLE啦。。

http://www.getuikit.net/docs/accordion.html

<div class="uk-accordion" data-uk-accordion="{collapse: false,showfirst: false}">

使用手风琴菜单，为容器元素添加 uk-accordion 类和 data-uk-accordion 属性就行。然后为容器内的每项内容添加uk-accordion-content类。最后，为标题或者其他元素添加 uk-accordion-title 类来创建拨动器。

还要注意，JQUERY一定要导入才能用哟。

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Accordion - UIkit tests</title>
        <link id="data-uikit-theme" rel="stylesheet" href="css/uikit.min.css">
        <link id="data-uikit-theme-accordion" rel="stylesheet" href="css/components/accordion.min.css">
        <script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
        <script src="js/uikit.min.js"></script>
        <script src="js/components/accordion.js"></script>
    </head>

N多选项可用：

JavaScript 选项

选项    可用值    默认值    描述
showfirst    boolean    true    初始化时首先显示
collapse    boolean    true    允许同时展开多条
animate    boolean    true    拨动动画
easing    string    swing    动画功能
duration    integer    300    动画持续时间
toggle    string    .uk-accordion-title    拨动器的Css选择器
containers    string    .uk-accordion-content    内容容器的Css选择器
clsactive    string    uk-active    条目被激活时添加这个Class

好吧，，来个单条和多条的东东：

   <div class="uk-accordion" data-uk-accordion="{showfirst: false}">

                                <h3 class="uk-accordion-title">Heading 1</h3>
                                <div class="uk-accordion-content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                </div>

                                <h3 class="uk-accordion-title">Heading 2</h3>
                                <div class="uk-accordion-content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                </div>

                                <h3 class="uk-accordion-title">Heading 3</h3>
                                <div class="uk-accordion-content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                </div>

                            </div>

                            <hr class="uk-article-divider">

                            <h3 class="tm-article-subtitle">多条Example</h3>

                            <div class="uk-accordion" data-uk-accordion="{collapse: false,showfirst: false}">

                                <h3 class="uk-accordion-title">Heading 1</h3>
                                <div class="uk-accordion-content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                </div>

                                <h3 class="uk-accordion-title">Heading 2</h3>
                                <div class="uk-accordion-content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                </div>

                                <h3 class="uk-accordion-title">Heading 3</h3>
                                <div class="uk-accordion-content">
                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                                </div>

                            </div>

好吧，看看它丑陋的样子咯~~

UIKit的手风琴菜单，单条展开和多条同时展开的更多相关文章

  1. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  2. Angular.js+Bootstrap实现手风琴菜单

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

  3. easyui accordion—手风琴格子始终展开和多个格子展开

    来源:http://www.cnblogs.com/tylerdonet/p/3531844.html 始终打开有时候可能会很管用,其实就是一个设置问题.这里就不再介绍引用的资源了,这里只看看html ...

  4. 简单jQuery 实现手风琴菜单

    简单jQuery 实现手风琴菜单 css代码 如下: *{ margin: 0; padding: 0; } #accordion{ width: 500px; } #accordion>div ...

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

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

  6. easyui学习笔记10—手风琴格子始终展开和多个格子展开

    始终打开有时候可能会很管用,其实就是一个设置问题.这里就不再介绍引用的资源了,这里只看看html是怎么写的. 1.html代码 <body> <h2>Basic Accordi ...

  7. 如何用Mockplus快速做一个手风琴菜单？

    手风琴菜单是一种比较常用的菜单形式,利用原型工具来做这种菜单通常要用到中继器.即使是功能强大的Axure,想实现该效果也比较麻烦.但如果你对Mockplus有所了解,你一定知道,利用Mockplus的 ...

  8. html5 手风琴菜单

    因为项目需要,现在需要做个手风琴菜单,于是自己就瞎整了一下,所用只是less.js  javascript  jquery效果如图: 具体代码如下: <!DOCTYPE html> < ...

  9. 炫酷实用的CSS3代码垂直手风琴菜单

    今天在微博上看到别人分享的代码,自己拿来自己保存着. 代码效果如下: 下面是源码: index.html <!DOCTYPE html> <html > <head> ...

随机推荐

  1. WTL 自定义 Button类-自绘

    WTL 自绘Button类,支持按钮三种形态,正常模式,hover模式,鼠标按下模式,支持png图片.使用方法很简单: MyButton* pButton = new MyButton;   pBut ...

  2. github上建站和使用markdown写文章

    积累了那么久,终于成功搭建了github上的个人网站.虽然方法有点巧妙.不是还是建成了 同时学会用markdown写基本的文章.感觉还可以.附带我的github上的静态页面网站的网址:http://z ...

  3. Ubuntu Server下建立VPN服务器 pptp 模式的方法

    对于想要在外部访问内部的网络,除了在防火墙上开启相应服务器所对应的端口,最好的方法应该是建立VPN-Server,使得用户可以在外网任何一台计算机上拨入到内网中进行操作,而且VPN可以记录详细的日志, ...

  4. HTML5教程：课时一HTML简介

    一.HTML5新特性 1.HTML5多媒体:标签:视频<video>  :音频<audio> 2.HTML5应用:  本地数据存储:访问本地文件: 本地SQL数据:缓存引用: ...

  5. LLDB中的小技巧

    1.打印视图层次结构 po [self.view recursiveDescription]   2.临时调整界面UI      比如说现在你需要改变一个控件的背景色来更好的查看布局的问题,这是就不需 ...

  6. 月薪10K必备--C#下拉框联动

                   下拉框联动 很多网站上都用到下拉框联动,就是第一个下拉框没有选择任何项,第二个下拉框就没有选项.这样的做法更加谨慎,更加紧密. 下面我就教大家怎么做下拉框联动: 首先在窗 ...

  7. ZOJ 3725 Painting Storages（DP+排列组合）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5048 Sample Input 4 3 Sample Output ...

  8. Codevs 1010 过河卒 2002年NOIP全国联赛普及组

    1010 过河卒 2002年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 传送门 题目描述 Description 如图,A 点有一个过河卒 ...

  9. 求两个数的最大公约数（Euclid算法）

    求两个数 p 和 q 的最大公约数(greatest common divisor,gcd),利用性质 如果 p > q, p 和 q 的最大公约数 = q 和 (p % q)的最大公约数. 证 ...

  10. 对装饰模式(Decorator)的解读

    看过好多对装饰模式的讲解,他们几乎都有一句相同的话:对现有类功能的扩展.不知道大家怎么理解这句话的,之前我把”对功能的扩展“理解成”加功能=加方法“,比如Person类本来有两个功能:Eat 和 Ru ...