0

我正在制作一个响应式网站并致力于移动构建。我有一个菜单栏，当您单击它时，菜单会向下滑动。我唯一的问题是现在我有一些要添加的子菜单项，并且我拥有的 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/

当这工作时，我将在菜单项上有一个 + 号，让用户知道单击并展开菜单，并在打开时将一个减号滑回子菜单。

谢谢

4

2 回答 2

0

像这样的东西？

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%;
}

演示

于 2013-07-08T15:07:17.870 回答
0

首先从 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 为此

于 2013-07-08T15:42:31.137 回答