子导航不会向下滑动（CSS jQuery）答案

【问题标题】：Sub Navigation wont slide down (CSS jQuery)子导航不会向下滑动（CSS jQuery）
【发布时间】：2013-07-08 23:42:31
【问题描述】：

我正在制作一个响应式网站并致力于移动构建。我有一个菜单栏，当您单击它时，菜单会向下滑动。我唯一的问题是现在我有一些要添加的子菜单项，并且我拥有的 jQuery 和 css 与我正在尝试做的事情相冲突。当我单击带有子导航的菜单项时，有人可以看到为什么它没有向下滑动吗？

这里是菜单工作原理的链接：http://jsfiddle.net/ndT7H/1/

我正在使用 jQuery：

$('ul#nav-2 > li > ul > li a').click(function () {
    $('ul.sub-menu').slideUp('normal');
    if ($(this).next('ul.sub-menu').is(':hidden') == true) {
        $(this).next('ul.sub-menu').slideDown();
    }
});

我在此示例中使用它，并将代码放在单独的文件中，但不适用于我当前站点的代码。 http://jsfiddle.net/senff/9cK3X/3/

当这个工作正常时，我将在菜单项上显示一个 + 号，让用户知道单击并展开菜单，并在打开时显示一个减号以向上滑动子菜单。

谢谢

【问题讨论】：

你不应该在
抱歉，刚才在里面显示点击下拉菜单的位置，我现在更新链接

标签： jquery html css drop-down-menu

【解决方案1】：

这样的？

HTML

$('.dropdown').click(function () {
    $(this).siblings().find('ul ul').slideUp();
    $(this).find('ul#nav-2').find('> li > ul').slideToggle();
});

$('ul#nav-2  li  ul  li a').click(function (e) {
    e.stopPropagation();
    $(this).closest('ul').find('> li > .sub-menu').not($(this).next('ul.sub-menu').slideToggle()).slideUp('normal');
});

CSS

#nav-2 > li > ul {
    background:#FFF;
    left:0;
    top:56px;
    position:relative;
    color:#000;
    display:none;
    width:100%;
}

Demo

【讨论】：

几乎！像这样：jsfiddle.net/senff/9cK3X/3 当子菜单向下滑动时其他菜单项向下滑动，我有这个示例在测试页面上工作，但不在我已经实现的站点上。
嘿，我已经检查了您更新的答案，并且子导航仍然覆盖主菜单项而不是向下推？很棒的 jQuery 函数，简单而有意义！
@user2212564 那是你的 CSS。真的。你想重建整个菜单本身？这不是你的问题。
对不起，我不清楚，我会看看我的 css 和你的例子。您提供了很大的帮助，感谢您的建议。
@user2212564 你检查了最新的小提琴吗？不重叠？

【解决方案2】：

首先从 ul.sub-menu 中删除 !important

ul.sub-menu {
    border:1px solid red;
    display:none ;
}

然后使用这个脚本

$('.dropdown').click(function () {
    $(this).siblings().find('ul ul').slideUp();
    $(this).find('ul#nav-2').find('ul').first().slideToggle();
});

$('ul#nav-2 > li > ul > li a').click(function () {
    event.stopPropagation();
    $('ul.sub-menu').slideUp('normal');
    if ($(this).next('ul.sub-menu').is(':hidden') == true) {
        $(this).next('ul.sub-menu').slideDown();
    }
});

JSFIDDLE for this

【讨论】：