jQuery手风琴菜单 - 默认隐藏子菜单

我正在尝试创建一个jQuery手风琴风格的菜单，我已经非常接近它的工作原理了，但我一直被困在几个小时内，试图弄清楚为什么子菜单显示默认情况下当页面加载时。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，我不知道我应该说什么谢谢你，因为它说不使用评论...

来源

2013-09-21 record1

将您的菜单选择器从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(); 
    }); 
... 
});

Updated fiddle

来源

2013-09-21 08:02:10

你的顶部导航选择menu = $('nav ul');是选择所有ul元素，将其更改为'#mobnav> UL代替

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(); 
});

演示：Fiddle

来源

2013-09-21 08:02:20

jQuery手风琴菜单 - 默认隐藏子菜单

回答

相关问题