Question

我有一个带有一些JS和CSS的基本html页面：

$('.expand').click(function() {
  $('.img_display_content').show();
});

@charset "utf-8";

/* CSS Document */

.wrap {
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

.img_display_header {
  height: 20px;
  background-color: #CCC;
  display: block;
  border: #333 solid 1px;
  margin-bottom: 2px;
}

.expand {
  float: right;
  height: 100%;
  padding-right: 5px;
  cursor: pointer;
}

.img_display_content {
  width: 100%;
  height: 100px;
  background-color: #0F3;
  margin-top: -2px;
  display: none;
}

<html>

<head>
  <link href="beta.css" rel="stylesheet" type="text/css" />
  <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
</head>

<body>
  <div class="wrap">
    <div class="img_display_header">
      <div class="expand">+</div>
    </div>
    <div class="img_display_content"></div>
  </div>
  </div>
</body>

</html>

单击div上的课程expand不会做任何事情...... 我也尝试从jQuery网站复制/粘贴示例代码，但它也没有用。任何人都可以帮我解决这个问题吗？

Answer 1

只需添加文档就绪功能，这样它等待 DOM 加载，同样通过使用:visible伪你可以写一个简单的显示和隐藏功能。

Sample

 $(document).ready(function(){

    $( '.expand' ).click(function() {
         if($( '.img_display_content' ).is(":visible")){
              $( '.img_display_content' ).hide();
         } else{
              $( '.img_display_content' ).show();
         }

    });
});

Answer 2

演示

$( '.expand' ).click(function() {
  $( '.img_display_content' ).toggle();
});

.wrap {
    margin-left:auto;
    margin-right:auto;
    width:40%;
}

.img_display_header {
    height:20px;
    background-color:#CCC;
    display:block;
    border:#333 solid 1px;
    margin-bottom: 2px;
}

.expand {
 float:right;
 height: 100%;
 padding-right:5px;
 cursor:pointer;
}

.img_display_content {
    width: 100%;
    height:100px;   
    background-color:#0F3;
    margin-top: -2px;
    display:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrap">
<div class="img_display_header">
<div class="expand">+</div>
</div>
<div class="img_display_content"></div>
</div>
</div>

http://api.jquery.com/toggle/
“显示或隐藏匹配的元素。”

这在代码中要比使用show（）和hide（）方法短得多。

Answer 3

使用此

<script>
$(document).ready(function(){
    $( '.expand' ).click(function() {
        $( '.img_display_content' ).show();
    });
});
</script>

在加载文档对象模型后始终分配事件

Answer 4

内容尚未就绪，您可以将js移动到文件末尾或执行

<script>
$(function () { 
    $( '.expand' ).click(function() {
       $( '.img_display_content' ).show();
    });
});

这样文档在运行之前等待加载。

Answer 5

if (grid.selectedKeyNames().length > 0) {
            $('#btnRemoveFromList').show();
        } else {
            $('#btnRemoveFromList').hide();
        }

}

()-调用方法

没有括号-返回属性

jQuery显示/隐藏不起作用

5 个答案: