Semantic UI 之 手风琴 accordion
网页代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>手风琴</title><link rel="stylesheet" href="semantic-ui/semantic/dist/semantic.min.css"><script type="text/javascript" src="js/jquery3.3.1.js"></script><script type="text/javascript" src="semantic-ui/semantic/dist/semantic.min.js"></script></head><body><div class="ui container"><h2>标准手风琴</h2><div class="ui accordion"><div class="title"><i class="dropdown icon"></i>张三</div><div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium doloremque exercitationem nihil quam quod suscipit ullam voluptates. Asperiores autem corporis deleniti dolore explicabo harum neque nihil praesentium, quisquam temporibus ullam.</div><div class="active title"><i class="dropdown icon"></i>李四</div><div class="active content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium doloremque exercitationem nihil quam quod suscipit ullam voluptates. Asperiores autem corporis deleniti dolore explicabo harum neque nihil praesentium, quisquam temporibus ullam.</div><div class="title"><i class="dropdown icon"></i>王二</div><div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium doloremque exercitationem nihil quam quod suscipit ullam voluptates. Asperiores autem corporis deleniti dolore explicabo harum neque nihil praesentium, quisquam temporibus ullam.</div></div><div class="ui styled fluid accordion"><div class="title"><i class="dropdown icon"></i>张三</div><div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium doloremque exercitationem nihil quam quod suscipit ullam voluptates. Asperiores autem corporis deleniti dolore explicabo harum neque nihil praesentium, quisquam temporibus ullam.</div><div class="title"><i class="dropdown icon"></i>李四</div><div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium doloremque exercitationem nihil quam quod suscipit ullam voluptates. Asperiores autem corporis deleniti dolore explicabo harum neque nihil praesentium, quisquam temporibus ullam.</div><div class="title"><i class="dropdown icon"></i>王二</div><div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium doloremque exercitationem nihil quam quod suscipit ullam voluptates. Asperiores autem corporis deleniti dolore explicabo harum neque nihil praesentium, quisquam temporibus ullam.</div></div></div><script>$(".ui.accordion").accordion({exclusive:false,//true只能打开一部分的内容on:'mouseover',//触发切换事件的动作duration:300//动画持续时间，默认600});</script></body>
</html>
效果
Semantic UI 之 手风琴 accordion相关推荐
- semantic ui html5,css中什么是Semantic UI框架？
什么是Semantic UI框架? Semantic UI是一个用户友好度爆表的响应式前端框架,具备3000多个主题变量和50多个UI组件,可以快速搭建漂亮的网页.Semantic UI还集成了许多第 ...
- php ci框架后台管理,ci: 羽翼后台管理平台是一个简单的博客系统，后端基于CodeIgniter，前端基于Semantic UI 2.2.10...
羽翼后台管理平台(博客系统) 羽翼的由来 羽翼的故事是9月20日的晚上,我突然就想到--造翼者小说.我通过自己构思不少的东西.羽毛代表着轻松.纯洁和神圣的:翼代表着升天和梦想,两者在一起的含义:带着一 ...
- Semantic UI 之 图标 icon
第一步:创建项目 添加JQuery和Semantic UI包.创建icon.html页面: 第二步:icon.html页面 <!DOCTYPE html> <html lang=&q ...
- semantic ui html5,Semantic UI ：安装 Semantic UI
对 Semantic UI 有兴趣可以参考宁皓网的 Semantic UI 课程包,订阅宁皓网就可以学习全部课程了. Semantic UI 是一套开源的 CSS 与 JavaScript 框架,提供 ...
- Semantic UI入门
安装Semantic UI semantic UI可以有两种方式安装: 直接下载压缩包,解压后调用就可以使用了 用gulp进行安装 用gulp安装的优点是可以自己修改sementic ui中的样式,这 ...
- semantic.css,CSS框架：Semantic UI的优缺点
Semantic UI 作为一名全栈开发人员,Jack Lukic使用自然语言原理创建了Semantic UI框架.凭借着jQuery和LESS功能,Semantic UI提供了光滑.平整且精细的外观 ...
- Semantic Ui 之 容器 container
第一步:创建项目 添加JQuery和Semantic UI包.创建container.html页面: 第二步:container.html页面 <!DOCTYPE html> <ht ...
- Semantic UI术语
Semantic UI 的特定术语 术语类型 一.组件类型 (Types of Components) 二.工程术语 (Project Terminology) 三.定义术语 (Definition ...
- Semantic UI入门示例
1.下载Semantic UI包引入相关文件遇到各种各样的问题,比如icon找不到.无动效等问题,所以通过链接的方式引入文件. 2.在页面引入文件(按照顺序) 引入文件内容如下: <li ...
最新文章
- PyQt5 图形界面 - 配置界面跟随窗口大小调整灵活伸缩，设置页面控件居中显示实例演示
- NYOJ 28 大数阶乘
- NYOJ-42 一笔画问题
- c# groupbox大小_【已解决】C#中使得控件随着WinForm窗体的大小改变而自动变化
- oracle用户名密码过期引起的网站后台无法登录
- combox 增加请选择_娱乐测试：选择四种花束中的一种，测试你对婚姻的看法
- python 默认配置文件_python各类配置文件写法
- php preserve keys,PHP常用的数组函数
- 侦听键盘，将data写入文件data.out（成功版本）
- javascript高级编程(javascript高级编程第四版 pdf)
- java jxls导出excel
- 网络设计与系统集成概述
- 北通 战戟 BTP-2118
- php office 在线预览,在线预览pdf和Office文档
- MES系统架构初版ZXW
- 使用wps把word格式文件转换成pdf文件
- 亿级用户下的新浪微博平台架构
- back_inserter front_inserter inserter的用法
- 计算机科学 投稿 邮箱,《计算机时代》期刊投稿【编辑部_邮箱_地址_怎么样_版面费_代发表】...
- [译]带你揭开Kotlin中属性代理和懒加载语法糖衣