使用 fadeIn 和 fadeOut 隐藏和显示 div 不起作用

Question

我正在尝试根据以下代码隐藏或显示 div

$("#click").click(function(){
var x = $("#left-column").css('display');
console.log(x);
if(x=='block'){
   $("#left-column").fadeOut();
}else{
   $("#left-column").fadeIn();
}

});

html 文件如下：

  <!DOCTYPE html>
    <html lang="en">

    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../css/main.css">
    <link rel="stylesheet" 

 href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/css?family=Montserrat" 

    rel="stylesheet">
        <link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    </head>

<body>
    <div id="wrapper">
        <div id="left-column" class="col-3">
        </div>
        <div id="test">
            <button class="btn btn-danger" id="click">

            </button>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/filename.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
</body>

css 文件如下：

#left-column{
position:relative;
height:100vh;
background-image: linear-gradient(to top, #727bf5, #282828);
/* max-width:300px;
min-width:200px; */
float:left;

}
#test{
  float:left;
}
#wrapper{
 overflow: hidden;

 }

但我遇到以下错误

filename.js:6 未捕获（承诺）TypeError: $(...).fadeOut 不是 HTMLButtonElement.document.getElementById.onclick

处的函数

Answer 1

您正在使用 jQuery，因此请使用 jQuery:

$("#click").click(function(){
   var x = $("#left-column").css('display');
   console.log(x);
   if(x=='block'){
      $("#left-column").fadeOut();
   }else{
      $("#left-column").fadeIn();
   }
});

请注意，您不需要return隐藏div的指令，只需将其隐藏即可。

你还想测试x的值，不是x中有值

$("#click").click(function(){
   var x = $("#left-column").css('display');
   console.log(x);
   if(x=='block'){
      $("#left-column").fadeOut();
   }else{
      $("#left-column").fadeIn();
   }
});

#wrapper{display:flex;}
#wrapper>div {flex:1;}

#left-column{background:blue;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

 <div id="wrapper">
    <div id="left-column" class="col-3">Stuff</div>
    <div id="test">
        <button class="btn btn-danger" id="click">Button</button>
    </div>
</div>

更新：

用附加代码更新你的问题后，我发现了几个问题：

您包含 jQuery 的多个版本。

    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/filename.js"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>

不要这样做 - 它们会发生冲突。减少到只有一个：

    <script src="https://code.jquery.com/jquery-3.4.1.js"
        integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
    <script type="text/javascript" src="js/filename.js"></script>

此外，您的 javascript 文件 src="js/filename.js" 的完整内容是否张贴在问题中？如果是这样，那么您需要将您的 js 代码包装在 document.ready 包装器中：

$(document).ready(function(){
    $("#click").click(function(){
       var x = $("#left-column").css('display');
       console.log(x);
       if(x=='block'){
          $("#left-column").fadeOut();
       }else{
          $("#left-column").fadeIn();
       }
    });
});

你需要它的原因是因为它延迟 jQuery 绑定到 DOM 元素 直到它们实际存在于 DOM.

如果没有 document.ready 包装器，javascript 将尝试将点击事件绑定到 #click 按钮，但该按钮可能还不存在于 DOM 中，并且它不会工作。根据经验，总是以 document.ready 包装器开始您的 js 代码。因为这是一个基本点，所以我们通常不会在答案中包含这些信息——甚至 StackSnippet 示例也不需要 document.ready 包装器——但是你的真实代码需要 .

Answer 2

而不是使用

document.getElementById("click").onclick= async()=>{

您可以使用

$(document).on("click", "#click",function(){

如果您希望该函数甚至对以后将在页面上创建的元素起作用。

Answer 3

使用 fadeToggle 函数。

$(document).ready(function(){
  $("#click").click(function(){
    $("#left-column").fadeToggle();
  });
});

使用 fadeIn 和 fadeOut 隐藏和显示 div 不起作用

Hiding and showing div with fadeIn and fadeOut not working

html

jquery

fadeout

fadein

更新：