冰極峰 轉貼請註明出處 2023年5月28日2:50:29
最近一段時間一直比較忙，已經有好幾個月沒有打理部落格了。現將乙個最近在專案中製作的乙個選單例項整理出來，共享一下。
在後台或oa系統中最常用到的布局往往是乙個全屏布局，一般都是上中下三行兩列布局，頁頭、頁尾、左側選單加乙個右側ifame框架頁。所以那種帶摺疊的二級選單是會經常使用到的，本例便是實現這樣一種比較通用的全相容可高亮二級緩衝摺疊選單。
特點：
1.全相容，瀏覽器測試：ie5.5、ie6、ie7、ie8、ff3.0、谷歌、safari 4.0、opera9.0。
2. html結構優雅簡潔，無多餘標籤，利於程式迴圈輸出。
3.樣式與結構分離，你可以在樣式表中修改不同的風格。
4.當前選中項高亮狀態，一級選單和二級選單都可以高亮顯示。
5.摺疊層優雅緩衝動畫。
6.最適用於後台和一些oa系統介面。
缺點：
1.不支援防重新整理，這個功能在後台應用系統中應該用途不大，沒有加入這個功能。
2.在ie6中緩衝效果沒有出來，對於ie6，就弱化一下效果。
還是先看看效果截圖：
圖一簡單說一下製作這樣的選單的一些簡單的思路和會遇到的問題。
一般製作乙個效果，我的製作流程一般是先畫出html結構層內容，再寫樣式，之後是搞一些錦上添花的效果，如js特效等等。不知各位大牛們是怎樣乙個流程模式。
結構層：
結構層的構思一般是建立在乙個感性認識上的，一般是有乙個效果圖，根據這個效果圖構建最簡潔的html結構。如上圖所示，映入眼簾的第一印象，首先是想到用乙個ul的無序列表，但是…這是乙個二級巢狀的列表，這是我們首先需要考慮的問題。
因此結構應該是下面這樣子：
一級選單項
在有二級選單時是乙個巢狀的ul結構，無二級選單時則是如下：
當然，你也可以採用dl-dt-dd有序列表的方式來建立這種巢狀的結構，視你的實際情況而定。
有了最原始的結構層，你就需要新增一些必要的鉤子，用於css和js控制樣式和效果，我一直反對那種新增很多類名的寫法，這會增加頁面的體積，所以最精簡的作法是應用一兩個必要的類名給父容器即可，然後在樣式表中用子（群）選擇符設定各種個性的設定。在上面的結構，你會想到用幾個類名來定義所有的樣式呢？
我的做法是只用三個類名即可以控制全部的樣式顯示了。乙個是最頂級ul，定義為class=」menu」，乙個是二級選單的容器，也就是巢狀的ul定義乙個class=」level2」，最後是一級選單項li定義乙個class=」level1」，有了這三個鉤子，你就可以操縱整個結構的樣式了。
表現層：
樣式表的設定都很簡單，唯一要注意的是，為了便於js控制二級選單的顯隱和記錄當前選中項的高亮狀態，所以我不用hover偽類來實現滑鼠的滑入滑出效果，而採用js來模擬它。用js控制樣式的關鍵**如下：
一級選單樣式1/*
一級選單三態樣式,供js呼叫*/2
.menu li.level1 a
3.menu li.level1 a.hove
4.menu li.level1 a.cur
5二級選單樣式1/*
二級選單三態樣式,供js呼叫*/2
.menu li.level1 a
3.menu li.level1 a.hove
4.menu li.level1 a.cur
行為層：
因為前面已經提到，我們在樣式表並沒有定義選單的三態效果，所以我們需要給每個選單項繫結onmouseover、onmouseout和onclick事件模擬出這種效果來。在結構層中我們並沒有定義這個總容器的id，而只定義了乙個class類名，所以在js新增了乙個擴充套件的getelementsbyclassname()方法（感謝好友司徒正美），根據類名來獲得這個物件。用迴圈閉包來繫結這三個事件。
有什麼問題請在本部落格中跟貼討論，祝你用得開心！
根據網友的意見修改了一下原始碼。
hibernate的二級緩衝
二級緩衝 什麼是二級緩衝？二級緩衝也可以理解為sessionfactory級別的緩衝，sessionfactory是生產session的工廠，那麼我們可不可以這麼理解，session關聯乙個指向資料庫的結果集，那麼下次我在發sql的時候，我發現，sessionfactory裡面已經有了乙個指向這個結...
Hibernate 一級 二級緩衝
hibernate緩衝按級別共分為兩種，一級緩衝 session 和二級緩衝 sessionfactory 有的也說是三種，還有一種是查詢緩衝，當然，查詢緩衝是依託於二級緩衝。ok，什麼是緩衝？在記憶體裡開闢一塊空間把本來應該存在硬碟裡面的資料，存在這個空間裡面，將來，需要這塊資料的時候直接在記憶體...
vue高亮一級 二級導航
使用vue開發過程中有的專案會存在多級導航的情況，如下圖，這種就存在了兩層，那麼該如何高亮一級導航，又該如何高亮二級導航這就是今天我要記錄的內容。1 高亮一級導航很簡單，如下 點選一級導航 changefirstlevel index,e 2 高亮二級導航，如下 view部分 點選二級導航 chan...