调整一下窗口的宽度 ... 我们可以再优化一下子导航在小尺寸的移动设备上的样子 .. 现在子导航上的菜单项被隐藏起来了 ... 这是因为我们之前在做主导航的时候添加的样式 ..

打开 navbar 这个样式文件 ... 在这条媒体查询里面 .. 有一块样式就是隐藏了菜单内容 .. 在整个这块样式的选择器里面，可以用一下否定选择器 .. :not(.sub)，意思就是元素不能包含 .sub 这个 css 类 ..

这样子导航的菜单现在会显示出来 ... 再看一下主导航 ... 点击这个菜单按钮 .. 会显示边栏，边栏上会显示主导航上的菜单内容，还有子导航的菜单内容 ..

这是因为我们克隆了导航栏下的菜单内容，然后把菜单项目都放到了这个边栏上 .. 现在我不想把子导航的菜单内容放到边栏上 .. 可以再去做点调整 ..

先打开 product.html .. 找到主导航的包装元素 ... 在上面我们可以添加一个 id .. 值可以是 navigation ..

再打开 index.html ... 同样在主导航的包装元素上，添加一个 id 属性 ... 对应的值也是 navigation ..

然后打开自定义脚本 ... 找到克隆导航栏内容的地方 ... 修改一下这个选择器 ... 用刚才我们添加的 id 作为选择器的一部分 .. #navigation 下面的 .menu ..

这样对应的动作就只会应用在主导航上面 ..

现在我们可以用一下手风琴去处理小尺寸移动设备上的子导航的显示 .. 打开自定义脚本 .. 这里我之前用 enquire 注册了一条媒体查询，在小尺寸的设备上去执行对应的 JavaScript 脚本 ..

在这个 match 方法里面，我们再添加点东西，找到子导航 .. $('.ui.sub.navbar .content') .. 先用 addClass 在元素上添加一个 accordion 类 ..

然后再用一下 accordion 方法 .. 一个对象 .. 设置一下 selector .. title 是 '.header'，标题是子导航栏上的大标题 .. trigger，触发器也设置成 '.header'，就是点击了子导航里面的大标题，就会显示或隐藏对应的内容 .. 再添加一个 content 设置一下手风琴项目上的内容 .. 这里设置成 .menu ..

在下面这个 unmatch 方法里面， 我们可以去掉用在子导航上的 accordion 类 .. $('.ui.sub.navbar .content').removeClass('accordion')

再打开 _accordion.scss 这个样式文件 ..

嵌套一个 .menu .. display 的值设置成 none .. &.active ... display 设置成 block .. 就是如果用手风琴展示菜单内容的时候，默认会隐藏菜单内容，在激活状态下，才会显示菜单内容 ..

再去预览一下 ... 子导航的菜单现在是隐藏的状态 ... 点一下导航栏上的大标题 .. 会显示菜单 ...

再调整一下窗口的尺寸 ... 窗口大于一定宽度的时候，菜单默认会显示出来 ..