Настройка файлов cookie для складного меню jQuery при использовании .toggle () - PullRequest
0 голосов
/ 03 октября 2011

Я пытаюсь настроить файлы cookie в сворачиваемом вертикальном списке, я использую .toggle (), чтобы скрыть и показать список, и jQuery Cookie Plugin .У меня действительно простая навигация, как это:

<ul class="menu-sidebar">
  <li>Item 1</li>
  <li><a href="#">Item 2</a>
    <ul>
      <li>Item 2.1</li>
    </ul>
  </li>
  <li><a href="#">Item 3</a>
    <ul>
      <li>Item 3.1</li>
    </ul>
 </li>
 <li>Item 4</li>
</ul>

со следующим CSS:

.js .menu-sidebar li ul{display:none;}

Затем я переключаю список следующим образом:

jQuery(document).ready(function(){
  $('.menu-sidebar li:has(ul) a').click(function(){
    $(this).next().toggle();
  });
});

Это просто иотлично работает, но я не могу понять, как на этом смотреть печенье.Я пытался сделать это так:

$('.menu-sidebar li:has(ul) a').click(function(){
  $(this).next().toggle();

  if ($(this).next().is(':visible')){
    $.cookie('verticalNav', 'expanded');
  }

  if ($(this).next().is(':hidden')){
    $.cookie('verticalNav', 'collapsed');
  }

  var verticalNav = $.cookie('verticalNav');
  if (verticalNav == 'expanded'){
    $(this).next().show();
  }
});

Без удачи.Какие-нибудь советы?Спасибо!:)

1 Ответ

0 голосов
/ 03 октября 2011

Уберите этот последний блок из метода click ().Это избыточно внутри.(И, конечно, оберните все это в блок $(document).ready(function() {...});.)

ОБНОВЛЕНИЕ: Этот код будет работать с несколькими подменю, назначая каждому из них разные значения cookie.http://jsfiddle.net/GDudf/13/

$('.menu-sidebar li:has(ul) a').click(function() {
    $(this).next().toggle();
    if ($(this).next().is(':visible')) {
        $.cookie($(this).text(), 'expanded');
    }

    if ($(this).next().is(':hidden')) {
        $.cookie($(this).text(), 'collapsed');
    }
});

$('.menu-sidebar > li').each(function() {
    var verticalNav = $.cookie( $(this).children('a').text() );
    if (verticalNav == 'expanded') {
        $(this).find('ul').show();
    }
});
...