slideToggle Выпадающее меню

Question

slideToggle Выпадающее меню

0

Мне нужна помощь с Jquery, пожалуйста.

У меня есть эта строка кода, которая запускает мое раскрывающееся меню для отображения/скрытия (видимость):

// toggle the menu items' visiblity
      .find('h2')
         .bind('click focus', function(){
            $(this).parent().toggleClass('expanded')
         });

Код взято из: http://filamentgroup.com/examples/rwd-nav-patterns/

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

ВОПРОС:

Как я могу адаптировать этот код, чтобы заставить slideToggle работать?

Я попытался заменить "toggleClass" на "slideToggle", что в некотором роде работает, но вместо этого переключает мое меню вверх, тем самым скрывая "h2".

Ссылка JSFiddle: немного измените размер окна для запроса @Media Quake. Красная рамка (верхний правый угол) представляет раскрывающееся меню.

http://jsfiddle.net/87G6a/

Все комментарии/ответы очень ценятся и будут проголосованы.

Спасибо.

Alex 29 нояб. 2013, в 20:38

Источник

0

Вы можете опубликовать свой HTML
Bhadra 29 нояб. 2013, в 19:18
0

настроить скрипку с попыткой. Это относительно простая задача, но мы не сможем помочь, пока не увидим ваш код.
David Aguirre 29 нояб. 2013, в 19:23
0

@DavidAguirre Спасибо за предложение. Я загрузил ссылку на урезанную версию моего сайта.
Alex 29 нояб. 2013, в 19:52

Показать ещё 1 комментарий

Теги:

jquery

html5

css3

slidetoggle

2 ответа

-1

$('nav ul li').hover(function(){
    $(this).find('.sub-menu li').slideToggle();
});

Ayan Chakraborty 03 окт. 2016, в 11:24

0

Хотя этот код может быть ответом на проблему, было бы лучше, если бы вы добавили объяснение того, что делает код и как он отвечает на вопрос.
AdrianHHH 03 окт. 2016, в 14:36

Ещё вопросы

настроить скрипку с попыткой. Это относительно простая задача, но мы не сможем помочь, пока не увидим ваш код.
@DavidAguirre Спасибо за предложение. Я загрузил ссылку на урезанную версию моего сайта.
Хотя этот код может быть ответом на проблему, было бы лучше, если бы вы добавили объяснение того, что делает код и как он отвечает на вопрос.

David Aguirre · Accepted Answer · 2013-11-29T17-50-00.000Z

Это может быть то, что вы ищете.

http://jsfiddle.net/defmetalhead/2ezsP/

$('.mainMenu').children('li').on('click', function() {
   $(this).children('ul').slideToggle('slow'); 
});

Все в этом коде может быть сделано другим (лучшим) способом. Однако проверьте этот обновленный скрипт. http://jsfiddle.net/defmetalhead/87G6a/2/

 .find('h2')
    .bind('click focus', function () {
    $('ul').slideToggle('slow');
  });

Будьте немного более точными относительно того, что вам нужно.

Спасибо за пример. Но есть ли способ адаптировать мой текущий код, чтобы заставить его работать, без существенного изменения структуры навигации html? Я пытался, но без удачи.
Уменьшите ширину окна результатов. Уменьшите его. Элемент «h2» должен отображаться в виде красной рамки в правом верхнем углу. Вы можете щелкнуть по нему, чтобы отобразить / скрыть меню пользователя.