带有孩子的JQuery手风琴菜单和显示活动页面

时间:2013-08-14 20:31:15

标签: javascript jquery css html-lists pyrocms

我想用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页面扩展吗?当我重新加载页面时,它们会不断扩展。

0 个答案:

没有答案