JS實(shí)現(xiàn)多級菜單中當(dāng)前菜單不隨頁面跳轉(zhuǎn)樣式而發(fā)生變化
一.概述
本文介紹了JQuery巧妙實(shí)現(xiàn)多級菜單中當(dāng)前菜單不隨頁面跳轉(zhuǎn)樣式發(fā)生變化，貌似沒看懂啥意思？
看圖說話：就是點(diǎn)二級或多級菜單時(shí)，父級展開，當(dāng)前菜單是被選中狀態(tài)，這下明白了吧？
二.應(yīng)用場景
當(dāng)一個(gè)項(xiàng)目使用公共模板文件時(shí)（如上圖的左側(cè)菜單欄），我們給每個(gè)子菜單添加鏈接時(shí)，點(diǎn)擊頁面跳轉(zhuǎn)樣后還是公共模板的樣式，這時(shí)就需要實(shí)現(xiàn)動(dòng)態(tài)加載當(dāng)前菜單的樣式。
三.實(shí)現(xiàn)方法
第一種：.通過php傳遞變量，模板頁面通過接收這些變量來實(shí)現(xiàn)當(dāng)前頁面的菜單選中與否，父級展開等這些樣式
缺點(diǎn)：雖然實(shí)現(xiàn)簡單，但是每個(gè)頁面都需要php傳遞變量，很繁瑣,這種方法不推薦，故不再贅述！
第二種：通過比對當(dāng)前菜單里的a標(biāo)簽的href值與瀏覽器的url的值，判斷a標(biāo)簽里href屬性值是屬于瀏覽器url中的一部分，即表示包含該a標(biāo)簽的菜單應(yīng)該時(shí)被選中狀態(tài)，在將樣式賦予該菜單及對應(yīng)的父級菜單。
四.舉個(gè)栗子
<ul class="sidebar-menu">
<li class="header">主菜單</li>
<li class="treeview">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<i class="fa fa-users"></i> <span>用戶管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="{{ path('agent') }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 代理商</a></li>
<li><a href="{{ path('client') }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 委托人</a></li>
<li><a href="{{ path('cs_staff') }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 客服</a></li>
<li><a href="{{ path('admin') }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 管理員</a></li>
</ul>
</li>
<li class="treeview">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<i class="fa fa-bicycle"></i> <span>車輛管理</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="{{ path('bike') }}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 單車</a></li>
</ul>
</li>
<li class="treeview">
<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >
<i class="fa fa-fw fa-cny"></i> <span>統(tǒng)計(jì)報(bào)表</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><a href="{{ path('report')}}" rel="external nofollow" ><i class="fa fa-circle-o"></i> 單車收益</a></li>
</ul>
</li>
</ul>
注：上述樣式是bootstamp的樣式
如果當(dāng)前頁面是管理員頁，那個(gè)給所對應(yīng)的li添加class="active"的屬性，父級ul的樣式由style="display: none;"修改為style="display: block;",ul的父級再添加class="active"的屬性，即有了圖一的效果。
以下是我寫的js實(shí)現(xiàn)代碼，放在公共js文件即可
var CURRENT_URL = window.location.href.split('?')[0];
CURRENT_URL_ARR=CURRENT_URL.split("/",6);
for (i=0;i<CURRENT_URL_ARR.length ;i++ ){
TEM_URL = CURRENT_URL_ARR.join(",");
TEM_URL = TEM_URL.replace(/,/g,"/");
$('.sidebar-menu').find('a').filter(function () {
return this.href ==TEM_URL+"/";
}).parent('li').addClass('active').parent('ul').css("display","block").parent('li').addClass('active');
CURRENT_URL_ARR.pop();
}
解釋：
第1行：取得當(dāng)前url？前的地址，去除url參數(shù)
alert(CURRENT_URL);
結(jié)果為：http://partner.bike.lc/admin/
第2行：把url里按“/”再次分割成字符串?dāng)?shù)組，后面的6為了精確的找到對應(yīng)控制器及方法，按需設(shè)著
alert(CURRENT_URL_ARR);
結(jié)果為：http:,,partner.bike.lc,admin,
第3行：循環(huán)匹配url
第4行：再將數(shù)組轉(zhuǎn)化為字符串
aert(TEM_URL);
循環(huán)得到的結(jié)果依次為：
http:,,partner.bike.lc,admin, http:,,partner.bike.lc,admin http:,,partner.bike.lc ...
第5行：將上一步字符串轉(zhuǎn)化為URL形式
aert(TEM_URL);
循環(huán)得到的結(jié)果依次為：
http://partner.bike.lc/admin/
http://partner.bike.lc/admin
http://partner.bike.lc
...
第6-10行：遍歷菜單欄里的所有a標(biāo)簽，判斷循環(huán)里的url是否有等于a標(biāo)簽的href值，如果有加上所需的樣式
注：
this.href得到的是完整的URL地址；
pop用于刪除并返回?cái)?shù)組的最后一個(gè)元素，此步很重要。
好了，以上所述是小編給大家介紹的JS實(shí)現(xiàn)多級菜單中當(dāng)前菜單不隨頁面跳轉(zhuǎn)樣式而發(fā)生變化 。不知道大家理解了沒有。主要是理解實(shí)現(xiàn)思路，樣式可根據(jù)自身情況調(diào)整~
相關(guān)文章
無編譯/無服務(wù)器實(shí)現(xiàn)瀏覽器的CommonJS模塊化
這篇文章主要介紹了無編譯/無服務(wù)器實(shí)現(xiàn)瀏覽器的CommonJS模塊化，對模塊化感興趣的同學(xué)，可以參考下2021-05-05
在Javascript里，函數(shù)被調(diào)用的時(shí)候，除了接受聲明是定義的形式參數(shù)，每一個(gè)函數(shù)還接受兩個(gè)附加的參數(shù)：this和arguments。2011-09-09
輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果
這篇文章主要幫助大家輕松實(shí)現(xiàn)js選項(xiàng)卡切換效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-09-09
微信小程序清空輸入框信息與實(shí)現(xiàn)屏幕往上滾動(dòng)的示例代碼
這篇文章主要介紹了微信小程序清空輸入框信息與實(shí)現(xiàn)屏幕往上滾動(dòng)的示例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
通過button將form表單的數(shù)據(jù)提交到action層的實(shí)例
下面小編就為大家?guī)硪黄ㄟ^button將form表單的數(shù)據(jù)提交到action層的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)效果
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)態(tài)顯示項(xiàng)目倒計(jì)時(shí)，格式如4天7小時(shí)58分鐘39秒，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
這篇文章主要介紹了ZZ需求小程序純文本實(shí)現(xiàn)@功能，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
這篇文章主要介紹了js替換字符串中指定位置的字符，本文通過兩種方法實(shí)例代碼相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
JS打開新窗口的2種方式，需要的朋友可以參考一下2013-04-04
這篇文章主要為大家詳細(xì)介紹了php簡單數(shù)據(jù)庫操作類的封裝，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06