Question

我有一个应默认隐藏的部分，所以我这样做了：

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

在jQuery中，当我按下按钮时，它应该显示该部分，但它没有。

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

Demo

Answer 1

div的正确显示属性是＆＃34;阻止＆＃34; 而不是＆＃34;显示＆＃34; 。您也可以使用.show()代替.css("display","block")。

但是，我不知道为什么要将代码包装在IF BLOCK中，但您还必须将其包装在DOM Ready内以初始化该函数。

＆＃13;

$(document).ready(function(){
   if($("#btn").click(function(){
   $("#sction").css("display","block");
   }));
})

＆＃13;

.card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    width: 40%;
    height:350px;
    background-color:black;
}

＆＃13;

<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>

＆＃13;

Answer 2

Css display有四个属性none，inline，block和inline-block。

$("#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/3.3.1/jquery.min.js"></script>
<section id="sction" style="display:none">
<div class="card">
  <p>holla</p>
</div>
</section>
<button id="btn">
mmmmmmmmm
</button>

Answer 3

不需要if（）这应该有效：

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

为什么不显示隐藏的部分？

3 个答案: