jQuery手风琴菜单-默认情况下无法隐藏子菜单

Question

我正在尝试创建一个jQuery手风琴风格的菜单，并且几乎可以正常使用，但是我花了几个小时试图弄清楚为什么页面加载时默认显示子菜单。

我尝试使用CSS隐藏它们，由于某种原因，它们根本不会滑下来。 我也尝试过将它们隐藏在jQuery中，并遇到相同的问题。

我显然在某处出错了，但是我无法在哪里解决。

我为HTML和CSS创建了一个JSFiddle： 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的新手，我不确定应该在哪里说谢谢，因为它说不要使用注释...

Answer 1

将菜单选择器从nav ul更改为#mobnav > ul否则，您将在第一次单击时切换nav内部的所有列表

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

更新的小提琴

Answer 2

您的顶部导航选择器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();
});

演示： 小提琴