javascript - 菜单只有 "clickable"一次

标签 javascript jquery html css

我有一个不透明度为 0 的菜单 div,可见性最初是隐藏的。我基本上希望这个 div 在单击另一个 div 时可用(它是一个粘贴在我页面顶部的菜单,可通过单击发现/隐藏)。

效果很好....一次性...

我可以单击“#menuIcon”,我的菜单可用。我可以点击,它是隐藏的。然后我的菜单将永远隐藏并且不会再次可用。帮我解决这个问题??

jQuery code
/* Discovers menu on clicks */
$('#menuIcon').click(function () {
    if ($('#menu ul').css('visibility') == 'hidden') {
        $('#menu ul').css('visibility', 'visible');
        $('#menu ul').animate({
            opacity: 1
        }, 500);
    } else {
        $('#menu ul').animate({
            opacity: 0
        }, 500,
        function () {
            $('#menu ul').css('visibility', 'hidden');
        });
    }
});

最佳答案

在您的animate 脚本中,您忘记关闭正确位置的括号,这应该可以解决:

$('#menuIcon').click(function () {
    if ($('#menu ul').css('visibility') == 'hidden') {
        $('#menu ul').css('visibility', 'visible');
        $('#menu ul').animate({
            opacity: 1
        }, 500);
    } else {
        $('#menu ul').animate({
            opacity: 0
        }, 500,
        function () {
            $('#menu ul').css('visibility', 'hidden');
        });
}
});

另外,请注意 JSFiddle是你的 friend 。用它来帮助整理脚本并检查脚本中的错误

关于javascript - 菜单只有 "clickable"一次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30229195/

相关文章:

javascript - 在文本中添加指向文本的链接 - React Native

javascript - 如何实现 f(g) == g(f)

javascript - 使用 Quasar-Framework 0.15 进行 Jest 单元测试配置

javascript - 替换方法不起作用

javascript - 为整个域而不是特定页面设置 cookie(使用 JS)

javascript - 尝试缩放无法正常工作的 Canvas 图像

java - 如何在网页上显示动态生成的图像(条形码)?

javascript - jQuery ajax,附加数据有效但数据对另一端(计算机/用户)可见吗?

html - CSS 未在 WordPress 中更新

javascript - jQuery .remove() 不适用于动态表单