Question

我正在建立一个响应式网站并致力于mobilebuild。我有一个菜单栏，当你点击它时，菜单向下滑动。我唯一的问题是现在我有一些我想要添加的子菜单项目，我所拥有的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/

当这个工作时我会在菜单项上有一个+号，让用户知道点击并展开菜单，当它打开时可以减去子菜单。

由于

Answer 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

Answer 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

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

2 个答案:

HTML

的CSS