Question

我正在努力切换div的css。在阅读了尝试类似事物的人之后，我将我认为是有效代码的内容放在一起但是当我在适当的位置按下shift键（键代码16）时（＆＃34; .slide＆＃34; with＆＃34; .active＆＃34;添加）没有任何反应。这里的关键是我混合和匹配我在网上找到的各种代码，所以也许我错过了一些简单的东西。我对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最初也是透明的黑色，所以你可以看到这一点。

Answer 2

首先，切换功能接受两个参数：.toggle( [duration ] [, complete ] )

但你不需要任何这些。

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

http://api.jquery.com/toggle/

试图切换CSS属性，但我的jquery

2 个答案: