Я пытаюсь создать меню стиля аккордеона 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, и я не уверен, где я должен сказать спасибо, поскольку он говорит, что не следует использовать комментарии...
Главное 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();
});
Демо: скрипка
Измените свой селектор меню с 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();
});
...
});