jquery для переключения подменю, но оставить подменю открытым, если активна страница подменю

Просто пытаюсь погрузиться в jquery и простите меня, если на это уже был дан ответ. Искал, но не смог найти пример, относящийся к тому, что я пытаюсь сделать.

У меня вертикальное меню с несколькими подменю. Работает так, что при нажатии на меню верхнего уровня открывается подменю. Проблема в том, что я хотел бы, чтобы подменю оставалось открытым при нажатии одного из элементов подменю. Как и сейчас, при нажатии на элемент подменю меню сворачивается.

Вот мой код:

// Add class of drop if item has sub-menu
$('ul.sub-menu').closest('li').addClass('drop');

// Left Sidebar Main Navigation
var menu_ul = $('.menu > li.drop > ul'),
    menu_a  = $('.menu > li.drop > a');

menu_ul.hide();

menu_a.click(function(e) {
    e.preventDefault();
    if(!$(this).hasClass('active')) {
        menu_a.removeClass('active');
        menu_ul.filter(':visible').slideUp('normal');
        $(this).addClass('active').next().stop(true,true).slideDown('normal');
    } else {
        $(this).removeClass('active');
        $(this).next().stop(true,true).slideUp('normal');
    }
});

Я думаю, что если я попытаюсь перевести то, что я хочу, в четкое предложение типа кодера, оно будет читаться так. В основном мне нужно запросить DOM для любого активного меню с подменю, и если на странице отображается один из элементов подменю, а затем отобразить раскрывающееся меню подменю.


html jquery submenu
person Grady    schedule 10.08.2012    source источник
comment
Можете ли вы предоставить скрипку для тестирования?   -  person Cheluis    schedule 10.08.2012
comment
@Cheluis Кажется, я не могу показать все, что мне нужно, на скрипке. Вот она на сайте ссылка   -  person Grady    schedule 10.08.2012
comment
@Cheluis Я сделал скрипку, хотя она показывает только навигационное меню. Не совсем эффект перехода на страницу подменю и сохранения меню открытым. jsfiddle.net/4kYde   -  person Grady    schedule 10.08.2012

Ответы (3)


arrow_upward
1
arrow_downward

Я думаю, у вас есть два варианта.

  1. Рассмотрите возможность использования Ajax для загрузки ваших страниц.
  2. Имитируйте событие клика на каждой странице.

Например:

Для элементов "Портфолио" добавьте это

<script type="text/javascript">
  $(document).ready(function(){
      jQuery('#menu-item-38>a').trigger('click');
  });
</script>

Для «О нас»:

<script type="text/javascript">
  $(document).ready(function(){
      jQuery('#menu-item-180>a').trigger('click');
  });
</script>
person MCSI    schedule 10.08.2012
comment
Использование № 2 сработало :). Это в теме WP, и у меня есть php-файл портфолио, так что код попал туда. Для 3-х страниц о нас я поместил его в html-часть редактора только для этих страниц. Для всех, кто читает это, я изменил $(document) на jQuery(document), чтобы заставить его работать на меня. Для более постоянного исправления с помощью этого метода я мог бы создать шаблон страницы «О нас» с этим небольшим кодом. - person Grady; 10.08.2012
comment
хорошо! не забудьте принять ответ, если он был вам полезен! ;) - person MCSI; 11.08.2012

arrow_upward
0
arrow_downward

Как насчет удаления этой строки

menu_ul.filter(':visible').slideUp('normal');

Это мешало бы скрыть неактивные меню.

Попробуйте и дайте нам знать.

person Cheluis    schedule 10.08.2012
comment
Это позволяет переключать любое подменю, но все они закрываются при щелчке элемента подменю. См. здесь jeniolsendesign.com/about/clients - person Grady; 10.08.2012
comment
если щелкнуть подменю, загружается вся страница... Теперь я запутался - person Cheluis; 10.08.2012

arrow_upward
0
arrow_downward

Создайте дополнительный класс в таблице стилей

.menu ul.keepthisopen {display:block !important;}

Добавьте класс в ul в подменю, которое вы хотите оставить открытым.

(example) On the "About" page, go to into the code, find the menu, find the "About" link which is a

  • item, and below that is the submenu for that. Change it to

    <ul class="keepthisopen">

    Здесь отлично работает с тем же кодом/скриптами, что и вы. Подменю снова будет скользить вверх, если вы щелкнете по другому пункту меню.

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

    person user3137087    schedule 26.12.2013