个人中心
gpt4 book ai didi

jquery - Jquery 下拉菜单的问题

转载 作者：太空宇宙 更新时间：2023-11-04 14:40:20 25 4
gpt4 key购买 nike

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

我正在使用 flexboxes 来制作我的主菜单和子菜单(我需要向下滑动的菜单)，我认为这可能是导致问题的原因。这是我目前拥有的 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，所以主按钮在那里

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

最佳答案

我认为两个 (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 - Jquery 下拉菜单的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/18395626/

25 4 0
文章推荐： c++ - 如何在不打开 GUI 的情况下从 Visual Studio 执行 WinZip？
文章推荐： java - 无法从数据库读取值
文章推荐： javascript - Jquery函数后重置
文章推荐： java - 如何启动 javascript 脚本并从 java 传递 DOM 元素，同时拥有纯 html？