jQuery 手风琴菜单 - 默认情况下隐藏子菜单时遇到问题

jQuery accordion menu - trouble hiding submenus by default

本文关键字：菜单 遇到 隐藏 问题 情况下 手风琴 默认 jQuery      更新时间：2023-09-26

我正在尝试创建一个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;
      }
     });
    });

谢谢！

编辑：非常感谢回答的两个人 - 这很完美。我是堆栈溢出的新手，我不确定我应该在哪里说谢谢，因为它说不要使用评论......

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

演示：小提琴

将

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

更新的小提琴

相关文章：