javascript - 带有子项的 JQuery 手风琴菜单并显示活动页面

Question

我想用 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 页面添加到它们展开？当我重新加载页面时，它们会继续扩展。