javascript - 尝试切换 CSS 属性，但我的 jquery 有问题

Question

我正在努力切换 div 的 css。在阅读了尝试类似事情的人后，我把我认为是有效的代码放在一起但是当我在适当的地方按下 shift 键(键代码 16)(添加了“.active”的“.slide”)没有任何反应.这里的关键是我混合并匹配了我在网上找到的各种代码，所以我可能遗漏了一些简单的东西。我对 jquery/javascript 的了解非常有限。感谢您的帮助。

这是 HTML/CSS

<div class="slide active loading background292929">
    <div class="drop_down_menu">
    </div>
</div>

.drop_down_menu {
    -webkit-transition: all .4s ease-in-out;
    -moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
    position: absolute;
    background-color: rgba(255,255,255,.5);
    width: 100%;
    height: 100%;
    z-index: 500;
}

代码如下:

<script type="text/javascript">
        $(function () { 
            $(document).on("keyup", function (e) {
            if (e.keyCode == 16) {
                $(".slide.active > div.drop_down_menu").toggle(function () {
                    $("drop_down_menu").css({
                        "display": "none"
                    });
                }, function () {
                    $("drop_down_menu").css({
                        "display": "block"
                    });
                });
            }
        });
</script>

Answer 1

您在 $("drop_down_menu") 中缺少 DOT 它应该是 $(".drop_down_menu")

<script type="text/javascript">
$(function () { 
    $(document).bind('keyup', function(e) {
        (e.keyCode == 16) && ($(".drop_down_menu").toggle());
    });
});
</script>

请看下面的答案:

http://jsfiddle.net/ooh7fmuy/1/

我还稍微简化了您的代码 - div 最初也是透明的黑色，因此您可以看到它的实际效果。