JQuery Accordion Menu - Сохранить выбранное меню Open

Я пытаюсь создать вертикальное меню аккордеона для веб-сайта, над которым я работаю. Это мой первый раз когда-либо делал что-либо с jquery. Я смог получить рабочее меню так, как хочу, за исключением нескольких вещей.JQuery Accordion Menu - Сохранить выбранное меню Open

1) Мне нужно меню, которое будет расширяться в зависимости от того, какая страница загружена, если вы нажмете на элемент во втором меню, тогда второе меню необходимо развернуть, когда страница перезагружается. Меню не остается расширенным, когда вы нажимаете и загружаете новую страницу из меню. При перезагрузке страницы он просто полностью разрушается, пока вы не нажмете на заголовок, чтобы развернуть его снова. Я искал онлайн в течение нескольких дней и не могу найти ничего, что я могу использовать для решения этой проблемы. Я рассмотрел использование плагина jQuery cookie и просто проверил, какая страница загружена в данный момент, и используя это, чтобы определить, какое меню необходимо расширить, но я не могу заставить их работать.

2) Мое меню только расширяется при нажатии, оно не рушится при повторном нажатии. Возможно ли свернуть одно и то же меню, которое вы просто расширили, нажав снова?

Вот JS файл я создал:

function initMenu() { 
    $('#menu ul').hide(); 
    $('#menu li a').click(function() { 
     var checkElement = $(this).next(); 
     if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
      $(this).siblings().removeClass("selected"); 
      return false; 
     } 
     if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
      $('#menu ul:visible').slideUp('normal'); 
      checkElement.slideDown('normal'); 
      if (!$(this).hasClass("selected")) { 
       // Remove the class from anything that is active 
       $("a.selected").removeClass("selected"); 
       // And make this active 
       $(this).addClass("selected"); 
      } 
      return false; 
     } 
    }); 
} 
$(document).ready(function() { 
    initMenu(); 
});

Вот jsfiddle для полного HTML и CSS, а также: http://jsfiddle.net/CShsY/

Спасибо.

источник

2013-04-29 Thomas Spade

Может быть проверка плагин, который имеет те варианты, уже построенные для вас. http://webcloud.se/jQuery-Collapse/ – ferne97

Я обновил свою скрипку: http://jsfiddle.net/CShsY/4/

У него есть много общих улучшения, а также исправляет вторую проблему. Ваша initMenu() функция теперь выглядит следующим образом:

function initMenu() { 
    $('#menu li > a').click(function(e){ 

     if($(this).next('ul').length > 0){ 

      e.preventDefault(); 

      var subNav = $(this).next('ul'); 

      if (subNav.is(':visible')){ 
       subNav.slideUp('normal') 
       $(this).removeClass("selected"); 
      }else{ 
       $('#menu ul:visible').slideUp('normal'); 
       subNav.slideDown('normal'); 
       $("a.selected").removeClass("selected"); 
       $(this).addClass("selected"); 
      } 
     } 

    }); 
}

e.preventDefault() только предотвращает действие по умолчанию a. Я также добавил чек, поэтому любые a элементы, которые не имеют ul после них, по-прежнему будут работать как обычные ссылки.

Для первой проблемы вы можете взглянуть на этот вопрос: highlight the navigation menu for the current page. Ответ состоял в основном в том, чтобы добавить class или id в ваш элемент body, который однозначно идентифицирует страницу, а также добавляет классы к каждой из ваших ссылок меню.Например:

<body id="home"> 
    /* other code here */ 
    <ul id="menu"> 
     <li><a href="#">Menu 1</a> 
      <ul class="home"> 
      /* more code here */

CSS:

#home #menu ul.home{display:block} 
/* The sub menu of 'home' will show on the home page */

источник

2013-04-29 21:10:01 Joe

Отличное спасибо! –

Я не уверен, если это лучший способ сделать это, но я добавил следующую строку, только после открытия функции мыши:

if ($(this).is(':visible')) {$('#menu ul:visible').slideUp('normal')};

Так полный код гласит:

function initMenu() { 
    $('#menu ul').hide(); 
    $('#menu li a').click(function() { 
     if ($(this).is(':visible')) {$('#menu ul:visible').slideUp('normal')}; 
     var checkElement = $(this).next(); 
     if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
      $(this).siblings().removeClass("selected"); 
      return false; 
     } 
     if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) { 
      $('#menu ul:visible').slideUp('normal'); 
      checkElement.slideDown('normal'); 
      if (!$(this).hasClass("selected")) { 
       // Remove the class from anything that is active 
       $("a.selected").removeClass("selected"); 
       // And make this active 
       $(this).addClass("selected"); 
      } 
      return false; 
     } 
    }); 
} 
$(document).ready(function() { 
    initMenu(); 
});

источник

2013-04-29 21:09:40 KevinD

Использование Jquery accordion плагин

Для достижения вариант первого использования функциональности active

Для достижения второго варианта использования функциональности collapsible

источник

2013-04-29 21:09:51 NullPointerException

Я могу ответить точка 2)

Вам нужно добавить функцию slideUp, когда элемент вы щелкаете имеет видимую UL, как это следующий элемент.

т.е.

if ((checkElement.is('ul')) && (checkElement.is(':visible'))) { 
    $(this).siblings().removeClass("selected"); 
    checkElement.slideUp('normal'); 
    return false; 
}

источник

2013-04-29 21:11:06

Я использовал код, который вы любезно предоставленный здесь (пытался реализации их всех по одному в мой список аккордеона), но дело в том, что элемент родительского списка становится мертвой ссылке, когда он рухнет и открывает его подсписку. Есть ли способ сделать это ссылкой, поэтому, когда я нажимаю на элемент ссылки, который имеет дополнительный список, он открывает свою страницу, но также сохраняет открытое подменю?

источник

2013-06-11 15:57:23 astronaut

Попробуйте это решение, которое работает как для выделения выделенного элемента меню, так и для управления слайдом на основе выбранного меню.

Выбор функции меню помещается в главной странице

<script type="text/javascript"> 
    function SelectMenu(index) { 
     var accordion_head = $('.sidebar-menu > li'); 
     var main = accordion_head[index]; 
     $(main).addClass("active"); 
     $(main).find('a').next().slideDown(200); 
    } 
</script>

В каждой странице перечислены в Accordian меню укажите ниже

<script type="text/javascript"> 
    $(document).ready(function() { 
     SelectMenu(1); 
    }); 
</script>

источник

2016-03-09 05:03:27 Vijayaraghavan

JQuery Accordion Menu - Сохранить выбранное меню Open

ответ

Смежные вопросы