[英]Nav/Subnav list, how to give clicked item active class after reload of page
我有幾個嵌套和隱藏的子導航列表
<ul class="nav">
<li><a href="index.html">Home</a></li>
<li><a class="profile" href="#">Profile</a>
<ul id="profile">
<li><a href="company.html">Company</a></li>
<li><a href="structure.html">Structure</a></li>
<li><a href="team.html">Team</a></li>
</ul>
</li>
<li><a class="projects" href="#">Projects</a>
<ul id="projects">
<li><a href="chapter.html">Chapter</a></li>
<li><a href="pblc-trde.html">Pblc Trde</a></li>
<li><a href="globe.html">Globe</a></li>
<li><a href="komforte.html">Komforte</a></li>
</ul>
</li>
我目前正在使用一些我在網上找到的jQuery,點擊后顯示/隱藏子導航。 我想要完成的是:
希望清理子菜單菜單的顯示/隱藏點擊功能。
當點擊子導航菜單項時,打開的相應頁面需要擴展子導航並給出相應的菜單項活動類,以便讓用戶知道他們所在的頁面。
我希望純粹在JS / jQuery中這樣做。 該網站的安裝將在WordPress中。
$(document).ready(function () { $(".profile").click(function () { var X = $(this).attr('id'); if (X == 1) { $("#profile").hide(); $(this).attr('id', '0'); } else { $("#profile").show(); $(this).attr('id', '1'); } }); //Mouse click on nav $("#profile").mouseup(function () {}); //Document Click $(document).mouseup(function () { $("#profile").hide(); $(".profile").attr('id', ''); }); $(".projects").click(function () { var X = $(this).attr('id'); if (X == 1) { $("#projects").hide(); $(this).attr('id', '0'); } else { $("#projects").show(); $(this).attr('id', '1'); } }); //Mouse click on nav $("#projects").mouseup(function () {}); //Document Click $(document).mouseup(function () { $("#projects").hide(); $(".projects").attr('id', ''); }); }); window.onload = function () { $("ul#profile li:first").addClass("active"); }; $(document).ready(function () { $("ul#profile").show() });
$(document).ready(function()
{
// Get the name of the page. Split the URL at the '/':s and get the last part
// with pop():
var pageName = (location.pathname).split('/').pop();
// If we couldn't get a page name, default to index.html:
if( pageName == '' )
{
pageName = 'index.html';
}
// Hide ul:s that are children of the navigation:
$('.nav ul').hide();
// Event handler for clicks on navigation links:
$('.nav a').on('click', function()
{
// Change visibility for the first ul-child of the current li.
// $(this) refers to the clicked element.
$(this).parent('li').find('ul').first().toggle();
// Hide other sub-menus:
$(this).parents('li').siblings('li').children('ul').hide();
});
// Search through all link elements in the nav menu:
$('.nav').find('a').each(function(index, value)
{
// Append a '$' to the pagename to make the match()-function search
// from the end of the href value:
pageName += '$';
if( value.href.match(pageName))
{
// If the pagename matches the href-attribute, then add the 'active'
// class to the parent li, and show parent ul:s:
$(this).parent('li').addClass('active').parents('ul').show();
}
});
});
您可以使用Cookie來保存當前打開菜單的值。 這將允許在頁面加載和瀏覽器會話之間保存/檢索值。
由於你已經有了jQuery設置,你可以使用jQuery Cookie插件來簡化操作。
它的代碼非常簡單(插件頁面上有更多示例)。
$.cookie('open_menu', 'projects'); //Save 'projects' under 'open_menu'
$.cookie('open_menu') //Returns 'projects'
只需檢查頁面加載時的值,並在單擊其中一個菜單時保存。
如果您不想添加任何額外的插件,請參閱JavaScript的內置cookie API的一些文檔。
編輯:我已經為您創建了一個帶有示例的JSFiddle 。 Cookie代碼似乎不適用於沙盒,但代碼應該適合您,如果您有任何問題,請告訴我。
$(window).load(function() {
if ($.cookie('show_menu') !== undefined) {
$('#' + $.cookie('show_menu')).click();
}
$('.nav > li > ul').each(function () {
//Hide the sub lists
$(this).hide();
//Get link with same ID as Class
var id = $(this).attr('id');
//When link is clicked
$('.' + id).click(function () {
//Get the sub list
var list = $('#' + $(this).attr('class'));
//Check if it's currently visible
if (list.is(':visible')) {
list.hide(); //Hide list
$.cookie('show_menu', ''); //Unset open menu
} else {
$('.nav > li > ul').hide(); //Hide all other lists
list.show(); //Show list
$.cookie('show_menu', list.attr('class')); //Set open menu
}
});
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.