手风琴的功能我打算用一下 semantic ui 里的 accordion 模块 ... 它有两部分，一个 css 样式，还有一个 js 文件 .. 样式我打算自己去创建一个 ... 因为模块自带的样式文件里面有很多样式我用不到 ..

在 semantic dist .. components 下面，你可以找到 accordion 的样式文件还有脚本文件 ..

我在页面上已经嵌入了 semantic ui 的完整的脚本，所以不需要再单独嵌入这个 accordion 脚本了 ..

打开自定义脚本文件 ... 在我们使用 enquire 注册的媒体查询的 match 方法里面，先找到页面上的页底元素 ... 这个元素的上面带 .ui 还有 .bottom ..

找到它以后在它上面添加一个 css 类，用的是 jQuery 的 addClass 方法 ... 添加的类的名字是 accordion ..

一会儿我们会用到这个类去添加点样式 ... 主要就是去设置元素的显示还有隐藏 ..

接着再用一下 accordion 方法，这个方法是 semantic ui 里的 accordion 模块提供的 ..

这个模块要求元素有特定的代码结构，并且元素上面还要有指定的 css 类，这些 css 类的名字我们可以去定制一下 .. 给这个方法一个对象参数 ... 里面添加一个 selector 属性 .. 它的值是个对象 ..

里面先添加一个 title ，指定一下手风琴的标题元素是谁... 我这里是一个带 .header 类的元素 ..

再添加一个 trigger 属性，它的值是触发显示或者隐藏手风琴项目的元素 .. 把它设置成 .header ... 这样点击带 .header 类的元素，可以显示或者隐藏手风琴项目 ...

然后添加一个 content 属性，指定一下手风琴里的内容是谁 ... 这里就是一个带 .content 类的容器 ..

再找到下面这个 unmatch 方法 ...

在它里面，先找到页底元素 ... 用一下 removeClass ，在不匹配注册的媒体查询的时候，去掉上面添加到 bottom 元素上的 accordion 类 ...

样式

下面我们还需要添加点样式 ... 创建一个样式文件 .. 名字是 _accordion.scss .. 找开 main.scss，导入这个样式 ..

添加一个 .ui.accordion ... 里面嵌套一些样式 .. 先设置一下 header ... 把 cursor 设置成 pointer ，让指针变成手型 ..

再添加一个 .content .. 用一下 display:none ，把内容隐藏起来 ... 手风琴的活动项目的内容元素上，会添加一个 active 类 ..

&.active ... 如果有这个类，我们把用内容显示出来 ... display: block ..

在 block 元素的下面，可以添加一个边框 ... .block ... 1px 的实线 .. 颜色是 ededed ...

设置好以后再去预览一下 ...

现在页底是分成五栏显示 ...

缩小一下窗口的宽度 .. 小于 767 像素以后，这个页底就会变成一个手风琴 ...

点一下标题，会显示标题下面的内容 ... 同时会隐藏之前显示的内容 ..