[英]How to keep a submenu open when the page changes
我的菜單有這個JS代碼:
$(document).ready(function () {
$('#nav > li > a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#nav li ul').slideUp();
$(this).next().slideToggle();
$('#nav li a').removeClass('active');
$(this).addClass('active');
}
});
});
在頁面更改時使子菜單保持打開的最佳方法是什么 - 可能使用cookie或會話?
我在這里創建了一個jsfiddle,所以你可以看到完整的html和css等: http : //jsfiddle.net/bMkEj/
可以使用HTML5 LocalStorage完成。
在單擊處理程序中,將活動菜單文本保存到localStorage:
$('#nav > li > a').click(function(e){
...
localStorage.setItem("activeSubMenu", $(this).text());
});
在頁面加載時,讀取localStorage並展開菜單(如果找到):
$(document).ready(function(){
var activeItem = localStorage.getItem("activeSubMenu");
if(activeItem){
$('#nav > li > a').filter(function() {
return $(this).text() == activeItem;
}).slideToggle();
}
});
加載頁面時傳遞查詢參數並使用它來選擇適當的導航項:
<ul>
<li id="foo"><a href="index.html?nav=foo">Foo</a>
<ul>
<li>Foo 1</li>
<li>Foo 2</li>
</ul>
</li>
<li id="bar"><a href="index.html?nav=bar">Bar</a>
<ul>
<li>Bar 1</li>
<li>Bar 2</li>
</ul>
</li>
<li id="baz"><a href="index.html?nav=baz">Baz</a>
<ul>
<li>Baz 1</li>
<li>Baz 2</li>
</ul>
</li>
</ul>
$(document).ready(function() {
var query = decodeURIComponent(window.location.search);
var matches = query.match(/nav=([^&]*)/);
var id = matches[1];
$('#' + id + ' ul').slideDown();
});
如果您正在運行PHP或任何其他服務器端語言,則可以將活動類添加到活動元素。
編輯:如果你剛剛運行JS,你可能能夠解析url(window.location.href)並使用它來設置活動類。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.