先来看下效果图:
思路与步骤:
布局方面,整体采用dl去写下,二级黏在dd中,用ul li去写下;可视化方面,页面某一级菜单,停用兄弟子菜单,页面某子菜单停用所有菜单。
1.采用dt作出第一级菜单
2.采用dd嵌套第二级菜单,起始暗藏、position为absolute,采用z-index浮上页面层
/*总菜单容器*/
.menu {
display: block;
height: 38px;
}
/*一级菜单*/
.menu dt {
font-size: 15px;
float: left;
/*hack*/
width: 33%;
height: 38px;
border-right: 1px solid #d2d2d2;
border-bottom: 1px solid #d2d2d2;
text-align: center;
background-color: #f4f4f4;
color: #5a5a5a;
line-height: 38px;
}
/*二级菜单外部容器样式*/
.menu dd{
position: absolute;
width: 100%;
/*hack*/
top:39px;
left:0;
z-index:999;
}
/*二级菜单普通样式*/
.menu li{
font-size: 14px;
line-height: 34px;
color: #575757;
height: 34px;
display: block;
padding-left: 8px;
background-color: #fff;
border-bottom: 1px solid #dbdbdb;
}
查阅效果,接下来同时实现页面事件。
3.dt存取页面事件tapMainMenu,flag掌控显隐toggle,提供更多2个class,hidden与show,去掌控显隐。备注:dt也就是可以bindTap的,不单是view。
/* 表明与暗藏 */
.show {
display: block;
}
.hidden {
display: none;
}
4.停用所有一级菜单,每个一级菜单都存有一个index标识,由tapMainMenu事件传达过去,与数组subMenuDisplay一一对应,当前元素subMenuDisplay[index]视原来状态同意就是表明或暗藏。
核心代码:
// 采用function初始化array,较之var initSubMenuDisplay = [] 既防止的提及激活的,同时方式更有效率,将来可以就是多种方式同时实现,个数也不定的
function initSubMenuDisplay() {
return ['hidden', 'hidden', 'hidden'];
}
Page({
data:{
subMenuDisplay:initSubMenuDisplay()
},
tapMainMenu: function(e) {
// 以获取当前表明的一级菜单标识
var index = parseInt(e.currentTarget.dataset.index);
// 分解成数组,全系列为hidden的,只对当前的展开表明
var newSubMenuDisplay = initSubMenuDisplay();
// 如果目前就是表明则暗藏,反之亦反之。同时必须暗藏其他的菜单
if(this.data.subMenuDisplay[index] == 'hidden') {
newSubMenuDisplay[index] = 'show';
} else {
newSubMenuDisplay[index] = 'hidden';
}
// 设置为代莱数组
this.setData({
subMenuDisplay: newSubMenuDisplay
});
}
});
5.选上二级菜单当前项,但给个系统icon及发生改变背景色,文本加粗,同样发生改变一级菜单标题,demo中得出一个弹窗
声明tapSubMenu方法,监听二级页面事件
tapSubMenu: function(e) {
// 以获取当前表明的一级菜单标识
var index = parseInt(e.currentTarget.dataset.index);
console.log(index);
// 暗藏所有一级菜单
this.setData({
subMenuDisplay: initSubMenuDisplay()
});
}
提highlight效果
/*二级菜单高亮样式*/
.menu li.highlight{
background-color: #f4f4f4;
}
与一级菜单相同,采用二维数组的方式同时实现页面高亮,这样就可以定位至就是某一级的某二级菜单,再同意表明暗藏。 布局文件换成:
效果例如图
适当的js代码必须译成:
//声明初始化高亮状态数组
function initSubMenuHighLight() {
return [
['','','','',''],
['',''],
['','','']
];
}
页面事件
tapSubMenu: function(e) {
// 暗藏所有一级菜单
this.setData({
subMenuDisplay: initSubMenuDisplay()
});
// 处置二级菜单,首先以获取当前表明的二级菜单标识
var indexArray = e.currentTarget.dataset.index.split('-');
console.log("indexArray : " + indexArray);
var newSubMenuHighLight = initSubMenuHighLight();
// 与一级菜单相同,这里不须要推论当前状态,只须要页面就给class剥夺highlight即可
newSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight';
console.log(newSubMenuHighLight);
// 设置为代莱数组
this.setData({
subMenuHighLight: newSubMenuHighLight
});
}
这样就同时实现了CT8325BBP与中止高亮。但还没用,与一级菜单相同,这里与兄弟子菜单不为不相容的,也就是说页面了本菜单,就是无法一刀切掉兄弟菜单的CT8325BBP状态的。于是我们改良js代码。
声明方式,转用变量形式,便利存储。
//定义初始化数据,用作运转时留存
var initSubMenuHighLight = [
['','','','',''],
['',''],
['','','']
];
页面事件
tapSubMenu: function(e) {
// 暗藏所有一级菜单
this.setData({
subMenuDisplay: initSubMenuDisplay()
});
// 处置二级菜单,首先以获取当前表明的二级菜单标识
var indexArray = e.currentTarget.dataset.index.split('-');
// 初始化状态
// var newSubMenuHighLight = initSubMenuHighLight;
for (var i = 0; i < initSubMenuHighLight.length; i++) {
// 如果Behren的就是一级菜单,则先清空状态,即非CT8325BBP模式,然后再低亮点中的二级菜单;如果不是当前菜单,而不理会。经过这样处置就能够留存其他菜单的CT8325BBP状态
if (indexArray[0] == i) {
for (var j = 0; j < initSubMenuHighLight[i].length; j++) {
// 同时实现清空
initSubMenuHighLight[i][j] = '';
}
// 将当前菜单的二级菜单设置回来
}
}
// 与一级菜单相同,这里不须要推论当前状态,只须要页面就给class剥夺highlight即可
initSubMenuHighLight[indexArray[0]][indexArray[1]] = 'highlight';
// 设置为代莱数组
this.setData({
subMenuHighLight: initSubMenuHighLight
});
}
尚待健全功能点:
1.表明与暗藏助推画下拉
2.抽象,采用反弹函数,将监听每个二级菜单的页面
3.数据源与表明应就是拆分的,一级与二级菜单的key value必须就是单一制出外,系统只认得index,然后对适当页面并作处置,重定向页面,甄选结果等
4.页面二级菜单时,可以将全部组的去除,尚待复原