JQuery - nested ul/li list, keep expanded after reload of page [duplicate]
I have a nested ul/li list
<ul>
<li>first</li>
<li>second
<ul>
<li>Third</li>
</ul>
</li>
... and so on
I found this JQuery on the interweb to use as inspiration, but how to keep the one item i expanded open after the page has reloaded?
<script type="text/javascript">
$(document).ready(function() {
$('div#sideNav li li > ul').hide(); //hide all nested ul's
$('div#sideNav li > ul li a[class=current]').parents('ul').show().prev('a').addClass('accordionExpanded'); //show the ul if it has a current link in it (current page/section should be shown expanded)
$('div#sideNav li:has(ul)').addClass('accordion'); //so we can style plus/minus icons
$('div#sideNav li:has(ul) > a').click(function() {
$(this).toggleClass('accordionExpanded'); //for CSS bgimage, but only on first a (sub li>a's don't need the class)
$(this).next('ul').slideToggle('fast');
$(this).parent().siblings('li').children('ul:visible'开发者_运维百科).slideUp('fast')
.parent('li').find('a').removeClass('accordionExpanded');
return true;
});
});
</script>
you can save the current open menu item in a cookie $.cookie('menustate')
similar: How to remember last state with Jquery?
The same way you manage state when passing data from page to page:
- Querystring
- Cookies
- Form post / hidden field
- Ajax to and from the server
I'll assume you dont like any of the previous answers since none of them have been accepted and present you with a less "correct" way of doing it. Before I get flamed to death, this is just my attempt at doing it with pure js/jq. You could parse out the URL (http://example/subsite) and select whichever piece is relevant (for the sake of ease, lets assume /subsite is what you want).
$(document).ready(function(){
var pathname = window.location.pathname;
var splitpath = pathname.split("/");
$("#nav-" + splitpath[1] + "").children().class('current')
});
Build your ID's into something like <li id=nav-subsite> and use the parsed out URL to build a selector for the correct tab/li/whatever. Is it weird? Sure, but I figured I'd throw in my $.02
This is not easily doable in JavaScript alone.
- Either the server sets the
accordionExpandedCSS class correctly when the page is reloaded (directly into the source HTML). This would require the server knows what<li>s the user had clicked on, naturally. - Or you avoid reloading the page at all and do partial page updates through AJAX calls. This is what most "modern" websites do.
- Or you do what Glennular suggests and save state info to a cookie.
Your choice.
I'm not sure what your menu is supposed to be doing exactly, but if it's a nav menu, you could add a brief bit of markup to your body element for each base page:
<body class="home"> <!-- for homepage -->
<body class="about"> <!-- for about page -->
<body class="etc"> <!-- for etc. -->
And have jQuery look for this marker and make a decision on how to handle the list tree once the page loads based on which page it is. It wouldn't require setting any cookies, and so long as they have JS enabled (which every user should at this point), everything's kosh magosh.
加载中,请稍侯......
精彩评论