jQuery аккордеонное меню - проблема с скрытием подменю по умолчанию

0

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

Я попытался скрыть их с помощью CSS, и по какой-то причине они тогда вообще не будут скользить вниз. Я также пытался спрятать их в jQuery и иметь ту же проблему.

Я, очевидно, ошибся где-то, но я не могу понять, где.

Я создал JSFiddle для HTML и CSS: http://jsfiddle.net/rcord/Gd7DM/7/

Мой jQuery:

    $(document).ready(function () {
      $('#mobnav > ul > li > a').click(function () {
        $('#mobnav li').removeClass('active');
        $(this).closest('li').addClass('active');
        var checkElement = $(this).next();
        if ((checkElement.is('ul')) && (checkElement.is(':visible'))) {
        $(this).closest('li').removeClass('active');
        checkElement.slideToggle('normal');
      }
      if ((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
        $('#mobnav ul ul:visible').slideToggle('normal');
        checkElement.slideToggle('normal');
      }
      if ($(this).closest('li').find('ul').children().length === 0) {
        return true;
      } else {
        return false;
      }
     });
    });

Спасибо!

Редактировать: Большое спасибо двум людям, которые ответили - это прекрасно работает. Я новичок в stackoverflow, и я не уверен, где я должен сказать спасибо, поскольку он говорит, что не следует использовать комментарии...

Теги:

2 ответа

0

Главное menu = $('nav ul'); навигации для навигации menu = $('nav ul'); это выбрать все ul элементы, изменить его на "#mobnav> уль вместо

var pull = $('#pull');
menu = $('#mobnav > ul');
$(menu).on('load').hide();
menuHeight = menu.height();
$(pull).on('click', function (e) {
    console.log('p')
    e.preventDefault();
    menu.slideToggle();
});

Демо: скрипка

0

Измените свой селектор меню с nav ul на #mobnav > ul иначе вы переключите все списки внутри навигатора с первого щелчка

$(function () {
    var pull = $('#pull');
    menu = $('#mobnav > ul');
    $(menu).on('load').hide();
    menuHeight = menu.height();
    $(pull).on('click', function (e) {
        e.preventDefault();
        menu.slideToggle();
    });
...
});

Обновленная скрипка

Ещё вопросы

Сообщество Overcoder
Наверх
Меню