这个也要进来看看哈。

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

因为官网提供太多的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. \n 与 \r 在记事本中的内容表现方式 原创

    总结:[0D,0A]的顺序才可以记事本才可以正常显示回车换行,其他EDITPLUS ,等编缉工具在下面三种情况下都可以换行 原始数据与表现形式     [0D,0A]序列才可以正常显示回车换行 --- ...

  2. 15分钟弄懂 const 和 #define

    什么是const ? 什么是#define? 他们有什么用? 他们有什么区别? 应该怎么用? 总结 1. 什么是const ? const是C/C++中的一个关键字(修饰符), const一般用来定义 ...

  3. Android开发之手势滑动（滑动手势监听）详解

    Android开发之手势滑动(滑动手势监听)详解 在Android应用中,经常需要手势滑动操作,比如上下滑动,或左右方向滑动,处理手势滑动通常有两种方法:一种是单独实现setOnTouchListen ...

  4. Javascript 异步编程的4种方法详解

    你可能知道,Javascript语言的执行环境是"单线程"(single thread). 所谓"单线程",就是指一次只能完成一件任务.如果有多个任务,就必须排 ...

  5. linux下实现redis共享session的tomcat集群

    为了实现主域名与子域名的下不同的产品间一次登录,到处访问的效果,因此采用rediss实现tomcat的集群效果.基于redis能够异步讲缓存内容固化到磁盘上,从而当服务器意外重启后,仍然能够让sess ...

  6. dumpbin.exe

    有时候我们想查看一个exe引用了哪些动态库,或者我们想看某个动态库包含哪些接口函数,这个时候可以使用dumpbin.exe工具: 1.输入Dumpbin -imports calldll.exe查看它 ...

  7. IIS应用地址池监控

    目的:公司服务器IIS有十几个应用地址池,总在不经意间停掉一个,停止线系统日志里会有一大堆警告日志,然后就停掉了,分析了好几次,网上有人说是某一个网站的问题应该查网站, 但是网站又有那么多地址,谁知道 ...

  8. 一封给“X教授”的回信(讨论Socket通信)

    转载:http://www.cnblogs.com/tianzhiliang/archive/2011/03/02/1969187.html 前几天"X教授"发Email与我讨论S ...

  9. python基础知识九

    sys模块 sys模块包含系统对应的功能.我们已经学习了sys.argv列表,它包含命令行参数. 命令行参数 例14.1 使用sys.argv #!/usr/bin/python # Filename ...

  10. winform程序中界面的跳转问题

    首先是我们进行窗口间的跳转,尤其注意的是winform程序里面的空间都是中线程安全的.但是注意的是如果你在一个线程中操纵另外的控件,这时候会提示你一个错误,这个错误的解决方法准备单独的在另一篇文章中来 ...