0

我的 Jquery 菜单有问题——我似乎无法让它同时出现 (1) 和 (2) slideDown，只有一个或另一个！

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

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

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

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

    );
});

我已经能够让它毫无问题地将其显示从无更改为 -webkit-flex，它只是不会滑下。这是我的相关 css/html 的其余部分：http: //jsfiddle.net/p4Cgu/10/

有任何想法吗？我对 Jquery 很陌生，所以这可能是一个菜鸟错误..

感谢您提供的任何帮助！:-)

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

编辑2：我已经设法让它向下滑动，现在只需让它在我将鼠标悬停在菜单项上时保持打开状态

4

1 回答 1

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;
})
于 2013-08-23T06:38:05.977 回答