JS實現(xiàn)多級菜單中當前菜單不隨頁面跳轉樣式而發(fā)生變化
一.概述
本文介紹了JQuery巧妙實現(xiàn)多級菜單中當前菜單不隨頁面跳轉樣式發(fā)生變化，貌似沒看懂啥意思？
看圖說話：就是點二級或多級菜單時，父級展開，當前菜單是被選中狀態(tài)，這下明白了吧？
二.應用場景
當一個項目使用公共模板文件時（如上圖的左側菜單欄），我們給每個子菜單添加鏈接時，點擊頁面跳轉樣后還是公共模板的樣式，這時就需要實現(xiàn)動態(tài)加載當前菜單的樣式。
三.實現(xiàn)方法
第一種：.通過php傳遞變量，模板頁面通過接收這些變量來實現(xiàn)當前頁面的菜單選中與否，父級展開等這些樣式
缺點：雖然實現(xiàn)簡單，但是每個頁面都需要php傳遞變量，很繁瑣,這種方法不推薦，故不再贅述！
第二種：通過比對當前菜單里的a標簽的href值與瀏覽器的url的值，判斷a標簽里href屬性值是屬于瀏覽器url中的一部分，即表示包含該a標簽的菜單應該時被選中狀態(tài)，在將樣式賦予該菜單及對應的父級菜單。
四.舉個栗子
<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)計報表</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的樣式
如果當前頁面是管理員頁，那個給所對應的li添加class="active"的屬性，父級ul的樣式由style="display: none;"修改為style="display: block;",ul的父級再添加class="active"的屬性，即有了圖一的效果。
以下是我寫的js實現(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行：取得當前url？前的地址，去除url參數(shù)
alert(CURRENT_URL);
結果為：http://partner.bike.lc/admin/
第2行：把url里按“/”再次分割成字符串數(shù)組，后面的6為了精確的找到對應控制器及方法，按需設著
alert(CURRENT_URL_ARR);
結果為：http:,,partner.bike.lc,admin,
第3行：循環(huán)匹配url
第4行：再將數(shù)組轉化為字符串
aert(TEM_URL);
循環(huán)得到的結果依次為：
http:,,partner.bike.lc,admin, http:,,partner.bike.lc,admin http:,,partner.bike.lc ...
第5行：將上一步字符串轉化為URL形式
aert(TEM_URL);
循環(huán)得到的結果依次為：
http://partner.bike.lc/admin/
http://partner.bike.lc/admin
http://partner.bike.lc
...
第6-10行：遍歷菜單欄里的所有a標簽，判斷循環(huán)里的url是否有等于a標簽的href值，如果有加上所需的樣式
注：
this.href得到的是完整的URL地址；
pop用于刪除并返回數(shù)組的最后一個元素，此步很重要。
好了，以上所述是小編給大家介紹的JS實現(xiàn)多級菜單中當前菜單不隨頁面跳轉樣式而發(fā)生變化 。不知道大家理解了沒有。主要是理解實現(xiàn)思路，樣式可根據(jù)自身情況調整~
相關文章
這篇文章主要介紹了javascript中的面向對象編程知識點，對面向對象編程進行概述，以及各種方法進行整理，感興趣的小伙伴們可以參考一下2015-11-11
這篇文章主要介紹了正則表達式基本語法及表單驗證操作,較為詳細的分析了正則表達式的基本語法以及基于JS實現(xiàn)的表單正則驗證操作相關實現(xiàn)技巧,需要的朋友可以參考下2017-04-04
多種方式實現(xiàn)JS調用后臺方法進行數(shù)據(jù)交互
幾種典型常用的方法如利用控件的AutopostBack屬性、Button提交表單等等，下面為大家分享下JS調用后臺方法進行數(shù)據(jù)交互示例2013-08-08
本文介紹了如何使用微信小程序技術制作個性化的婚禮邀請函,包括頁面布局、交互設計和多媒體資源整合,詳細闡述了從功能需求到頁面設計、測試優(yōu)化以及發(fā)布流程的全面開發(fā)步驟,通過本項目,可以提升創(chuàng)意設計和用戶體驗優(yōu)化的能力,需要的朋友可以參考下2024-10-10
一般如果變量通過var聲明，但是并未初始化的時候，變量的值為undefined，而未定義的變量則需要通過 "typeof 變量"的形式來判斷，否則會發(fā)生錯誤2012-11-11
這篇文章主要介紹了Bootstrap實現(xiàn)的表格合并單元格,涉及bootstrap界面布局相關操作技巧,需要的朋友可以參考下2018-02-02
這篇文章主要為大家詳細介紹了原生JS封裝vue Tab切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-04-04
xmlplus組件設計系列之路由（ViewStack)（7）
xmlplus 是一個JavaScript框架，用于快速開發(fā)前后端項目。這篇文章主要介紹了xmlplus組件設計系列之路由，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
firefox事件處理之自動查找event的函數(shù)（用于onclick=foo()）
在ie中，事件對象是作為一個全局變量來保存和維護的。 所有的瀏覽器事件,不管是用戶觸發(fā)的，還是其他事件， 都會更新window.event 對象。2010-08-08
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)緩動動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11