我想用jQuery创建一个手风琴菜单,它记住了活动页面。现在我有了以下菜单:
<nav id="secondary">
<ul id="nav">
<li class="tournament">
<a onclick="function">Belgie</a>
<ul class="sub" style="display: none;">
<li>
<li class="first"><a href="tournament1">tournament1</a></li>
<li class="last"><a href="test">test</a></li>
</li>
</ul>
</li>
<li class="tournament">
<a onclick="function">Nederland</a>
<ul class="sub" style="display: none;">
<li>
<li class="first"><a href="Nedtournament1">Nedtournament1</a></li>
<li class="has_children current">
<a href="Nedtournament2">Nedtournament2</a>
<ul class="dropdown">
<li class="first"><a href="subtournament2-1">subtournament2-1</a></li>
<li class="last current"><a href="subtournament2-2">subtournament2-2</a></li>
</ul>
</li>
<li><a href="Nedtournament3">Nedtournament3</a></li>
<li class="last"><a href="Nedtournament3">Nedtournament3</a></li>
</li>
</ul>
</nav>
我使用以下jQuery,它设置一个cookie来确定我们在哪个页面以及应该扩展哪个菜单。这有效,但不适用于儿童页面。
// creatie cookie
$('#nav > li > a').click(function(){
var navIndex = $('#nav > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#nav li ul').slideUp();
if ($(this).next().is(":hidden")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#nav li a').removeClass('active');
$(this).addClass('active');
});
// use cookie value
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#nav > li > a:eq('+checkCookie+')').next().show();
}
// complete jquery
$(document).ready(function () {
var checkCookie = $.cookie("nav-item");
if (checkCookie != "") {
$('#nav > li > a:eq('+checkCookie+')').next().show();
}
$('#nav > li > a').click(function(){
var navIndex = $('#nav > li > a').index(this);
$.cookie("nav-item", navIndex);
$('#nav li ul').slideUp();
if ($(this).next().is(":visible")){
$(this).next().slideUp();
} else {
$(this).next().slideToggle();
}
$('#nav li a').removeClass('active');
$(this).addClass('active');
});
});
有人知道我点击它们时如何添加cild页面扩展吗?当我重新加载页面时,它们会不断扩展。