jquery - 为什么无法显示隐藏部分?

标签 jquery html css

我有一个部分默认应该隐藏,所以我这样做了:

<section id="sction" style="display:none">
    <div class="card">
    </div>
</section>

在 jQuery 中,当我按下按钮时,它应该显示该部分,但事实并非如此。

if($("#btn").click(function(){
     $("#sction").show();
 }));

Demo

最佳答案

div 的正确显示属性是“block”,而不是“show”。您还可以简单地使用 .show() 而不是 .css("display","block")

但是我不知道为什么您将代码包装在 IF BLOCK 中,但您还必须将其包装在 DOM Ready 中才能初始化函数。

$(document).ready(function(){
   if($("#btn").click(function(){
   $("#sction").css("display","block");
   }));
})
.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 40%;
    height:350px;
    background-color:black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>

<section id="sction" style="display:none">
<div class="card">
</div>
</section>
<button id="btn">
mmmmmmmmm
</button>
</body>
</html>

关于jquery - 为什么无法显示隐藏部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50512041/

相关文章:

javascript - 如何停止在移动设备上滚动完整日历?

jquery - 根据表格单元格值更改行的颜色

javascript - 为什么我的游戏中的球不会停在边界处并弹回来?

html - 滚动条在 Chrome 中悬停时更改颜色

javascript - 强制 jQuery 在运行时更改动画

javascript - 如何获取输入值并将其 append 到新元素?

html - 使用 Bootstrap 容器时,粘性导航栏增加到 100%

javascript - jquery javascript css 问题 - 内联字体粗细操作

html - CSS 图像位于 anchor 标记内另一图像的顶部

jquery - 当 Flask wtforms 抛出错误时,如何更改 Bootstrap 表单输入字段的边框颜色?