摘要: 適用于商品列表篩選與功能菜單跳轉(zhuǎn)
先來看下效果圖：
思路與步驟：
布局方面，整體使用dl來寫，二級包在dd中，用ul li來寫；交互方面，點擊某一級菜單，關(guān)閉兄弟子菜單，點擊某子菜單關(guān)閉所有菜單。
1.使用dt做出第一級菜單
2.使用dd嵌套第二級菜單，初始隱藏、為，使用z-index浮出頁面層
/*總菜單容器*/.menu { : block; : 38px;
}/*一級菜單*/.menu dt { font-size: 15px; float: left; /*hack*/
width: 33%; : 38px; -right: 1px solid #; -: 1px solid #; text-align: ; -color: #; color: #; line-: 38px;
}/*二級菜單外部容器樣式*/.menu dd{ : ; width: 100%; /*hack*/
top:39px; left:0; z-index:999;
}/*二級菜單普通樣式*/.menu li{ font-size: 14px; line-: 34px; color: #; : 34px; : block; -left: 8px; -color: #fff; -: 1px solid #;
}
查看效果，接下來實現(xiàn)點擊事件。
如圖
3.dt綁定點擊事件，flag控制顯隱，提供2個class,與show，來控制顯隱。注：dt也是可以的，不單是view。
/* 顯示與隱藏 */.show { : block;
}. { : none;
}
4.關(guān)閉所有一級菜單，每個一級菜單都有一個index標(biāo)識，由事件傳遞過去，與數(shù)組一一對應(yīng)，當(dāng)前元素[index]視原來狀態(tài)決定是顯示或隱藏。
核心代碼：
價格
// 使用初始化array，相比var = [] 既避免的引用復(fù)制的，同時方式更靈活小程序自定義下拉，將來可以是多種方式實現(xiàn)，個數(shù)也不定的 () { ['', '', ''];
}
Page({
data:{
:()
},
: (e) {// 獲取當(dāng)前顯示的一級菜單標(biāo)識
var index = (e...index); // 生成數(shù)組，全為的，只對當(dāng)前的進(jìn)行顯示
var = ();// 如果目前是顯示則隱藏，反之亦反之。同時要隱藏其他的菜單
if(this.data.[index] == '') {
[index] = 'show';
} else {
[index] = '';
} // 設(shè)置為新的數(shù)組
this.({
:
});
}
});
5.選中二級菜單當(dāng)前項，但給個系統(tǒng)icon及改變背景色，文本加粗，同樣改變一級菜單標(biāo)題，demo中給出一個彈窗
聲明方法，監(jiān)聽二級點擊事件
: (e) { // 獲取當(dāng)前顯示的一級菜單標(biāo)識
var index = (e...index); .log(index); // 隱藏所有一級菜單
this.({
: ()
});
}
加效果
/*二級菜單高亮樣式*/.menu li.{ -color: #;
}
與一級菜單不同，使用二維數(shù)組的方式實現(xiàn)點擊高亮小程序自定義下拉，這樣才能定位到是某一級的某二級菜單，再決定顯示隱藏。 布局文件改成：
效果如圖
相應(yīng)的js代碼要寫成：
//聲明初始化高亮狀態(tài)數(shù)組 () { [
['','','','',''],
['',''],
['','','']
];
}
點擊事件
: (e) { // 隱藏所有一級菜單
this.({
: ()
}); // 處理二級菜單，首先獲取當(dāng)前顯示的二級菜單標(biāo)識
var = e...index.split('-'); .log(" : " + ); var = (); // 與一級菜單不同，這里不需要判斷當(dāng)前狀態(tài)，只需要點擊就給class賦予即可
[[0]][[1]] = ''; .log(); // 設(shè)置為新的數(shù)組
this.({
:
});
}
這樣就實現(xiàn)了高亮與取消高亮。但還沒完，與一級菜單不同，這里與兄弟子菜單是非互斥的，也就是說點擊了本菜單，是不能一刀切掉兄弟菜單的高亮狀態(tài)的。于是我們改進(jìn)js代碼。
聲明方式，改用變量形式，方便存儲。
//定義初始化數(shù)據(jù)，用于運行時保存var = [
['','','','',''],
['',''],
['','','']
];
點擊事件
: (e) { // 隱藏所有一級菜單
this.({
: ()
}); // 處理二級菜單，首先獲取當(dāng)前顯示的二級菜單標(biāo)識
var = e...index.split('-'); // 初始化狀態(tài)
// var = ;
for (var i = 0; i < .; i++) { // 如果點中的是一級菜單，則先清空狀態(tài)，即非高亮模式，然后再高亮點中的二級菜單；如果不是當(dāng)前菜單，而不理會。經(jīng)過這樣處理就能保留其他菜單的高亮狀態(tài)
if ([0] == i) { for (var j = 0; j < [i].; j++) { // 實現(xiàn)清空
[i][j] = '';
} // 將當(dāng)前菜單的二級菜單設(shè)置回去
}
} // 與一級菜單不同，這里不需要判斷當(dāng)前狀態(tài)，只需要點擊就給class賦予即可
[[0]][[1]] = ''; // 設(shè)置為新的數(shù)組
this.({
:
});
}
有待完善功能點：
1.顯示與隱藏帶動畫下拉
2.抽象化，使用回調(diào)函數(shù)，將監(jiān)聽每個二級菜單的點擊
3.數(shù)據(jù)源與顯示應(yīng)當(dāng)是分離的，一級與二級菜單的key value應(yīng)該是獨立在外，系統(tǒng)只認(rèn)index，然后對相應(yīng)點擊作處理，跳轉(zhuǎn)頁面，篩選結(jié)果等
4.點擊二級菜單時，會將全部組的清除，有待修復(fù)
實現(xiàn)了再來更新此源，git源將持續(xù)更新中……