利用框架开发二级菜单选项卡

 

 

图一

图二

图三

图四

类似这样的左边有导航栏，还是二级，一级栏目是一种布局，二级是另一种布局；

实现思想：导航栏使用框架，实现点击一级可以下拉、收起二级导航；然后将一级导航栏点击后展现的内容全部放在同一个class=“father"  的div中，将二级导航栏点击后展现的内容放在同一个class="son" 的div中。设置事件，当点击father的时候，设置son的display隐藏，然后father的display=block;  然后遍历father的一级导航头，让他们全部display:=none;然后根据this.getAttribute("index")获取到点击的那个一级导航头class下标，将自己设置为display：block;

具体步骤：
1.  外部进行div布局，搭好外部框架，如果不想写响应式，那就直接将div的width和height写死，跑来跑去烦死了；
2.   内部进行各自布局，其中左侧的导航栏可以使用框架引入class，想要修改框架的颜色等样式，可以在想修改的地方右键，找到对应的元素的css属性，复制属性直接修改值（因为直接复制属性修改可以避免因为权重问题无法覆盖框架的样式）。、
3.  开始写js动态效果，因为引入框架后，如果直接修改框架的属性可能会遇到框架使用了!important，所以可以直接使用将框架的属性添加和删除的方式，elemet.classList.addClass()。

z

注：引入框架的class之前，要特别注意，不要让两个不同的模块拥有相同的类；比如，这项目中用到了一个侧边栏，一个选项卡。在Layui这个框架中，侧边二级菜单栏和选项卡的部分class名字是有重叠的，这样一来如果我在写侧边栏的时候把某个类的height设置为一个固定的值，在选项卡中如果这个类的子元素高度超出 了设定的高度就会溢出遮盖下面其他元素。