0

我正在尝试创建一个 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的新手，我不确定我应该在哪里说谢谢，因为它说不要使用评论......

4

2 回答 2

0

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

更新的小提琴

于 2013-09-21T08:02:10.323 回答
0

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

演示：小提琴

于 2013-09-21T08:02:20.880 回答