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，否则您只需点击第一次即可切换导航中的所有列表

$(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

Answer 2

您的顶部导航选择器menu = $('nav ul');正在选择所有ul元素，将其更改为`#mobnav＆gt;而不是

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

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

2 个答案: