Question

我的Jquery菜单出现问题 - 我似乎无法让它同时出现（1）和（2）同时滑动，只有一个或另一个！

我正在使用flexbox来制作我的主菜单和我的子菜单（我需要滑动的那个），我认为这可能会导致问题。这是我到目前为止的Jquery：

$(document).ready(function () {
    $('#mainbutton').click(

    function () {
        $('.menu').css('display', '-webkit-flex');
        $('.menu').slideDown(100);
    },

    function () {
        $('.menu').slideUp(100);
    }

    );
});

我已经能够将它的显示从none更改为-webkit-flex而没有任何问题，它只是不会向下滑动。这是我的相关css / html的其余部分：http://jsfiddle.net/p4Cgu/10/

有什么想法吗？我对Jquery很新，所以这可能是一个noob错误..

感谢您提供的任何帮助！： - ）

编辑：修复了jsfiddle所以主按钮就在那里

edit2：我设法让它向下滑动，现在只需要将鼠标悬停在菜单项上就可以保持打开状态

Answer 1

我认为两（2）个回调函数不能在同一事件上工作。

只会执行第二个功能。

有一件事是首先为你想要的slideUp或slideDown设置一个回调函数。以下是修改后的代码。

$(document).ready(function () {
    $('#mainbutton').click(

    function () {
        $('.menu').css('display', '-webkit-flex');
        $('.menu').slideUp(1000,function () {
        $('.menu').slideDown(1000);
    });
    });
});

示例示例

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function () {
    $('.btn1').click(

    function () {
        $('p').css('display', '-webkit-flex');
        $('p').slideUp(1000,function () {
        $('p').slideDown(1000);
    });
    });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>

</body>
</html>

把这段代码

$('.menu').on('mouseover'function(){
$('.menu').show();
})
$('.menu').on('mouseout'function(){
$('.menu').hide;
})

Jquery下滑菜单的问题

1 个答案: