试图切换CSS属性,但我的jquery出现了问题

Trying to switch CSS properties but something is wrong with my jquery

本文关键字:jquery 我的 问题 CSS 属性      更新时间:2023-09-26

我正在切换div的css。在了解了人们尝试类似事情的情况后,我将我认为有效的代码组合在一起,但当我在适当的位置按下shift键(键代码16)时(添加了".slide"answers".active"),什么都没发生。这里的关键是,我混合和匹配了我在网上找到的各种代码,所以也许我错过了一些简单的东西。我对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>

您在$("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最初是透明的黑色,所以您可以在实际操作中看到它。

首先,toggle函数接受两个参数:.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/