logo标签列表

jQuery show/hide不起作用

javascriptjqueryhtmlcss
28

我有一个带有一些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>

点击具有 expand 类的 div 不起作用... 我还尝试复制/粘贴了 jQuery 网站上的示例代码，但也没有起作用。 有人可以帮我解决这个问题吗？

当定义了JavaScript时，img_display_content div没有显示，请查看http://jsfiddle.net/8z52e/。 - Victory
代码看起来没问题 DEMO http://jsfiddle.net/Fa8Xx/1773/ - Kevin Lynch
1
问题在于您在DOM加载之前附加了点击处理程序，您需要将代码包装在一个函数中，在DOM准备就绪后运行。 - Banana
6个回答
14

只需添加文档准备函数，这样等待DOM加载完成，同时通过使用:visible伪选择器，可以编写一个简单的显示和隐藏函数。

示例

 $(document).ready(function(){

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

    });
});
5

演示

$( '.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()方法相比，代码要短得多。

jsfiddle我忘了设置在domready时调用的函数。已经修复。 - JohanVdR
4
我保证楼主接下来的问题将是：“当加号可见时，我该如何将其改为减号？” - dsgriffin
4
在我的情况下，它没有起作用是因为我试图隐藏的包含div在html中应用了Bootstrap flex属性。一旦我将所有内容移动到一个没有任何Bootstrap类的父div中，现在隐藏就可以工作了。
3
使用这个

标签

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

事件分配总是在文档对象模型加载后进行。
仅使用show method()方法是无法再次隐藏它的。 - JohanVdR
我解决了所提出的问题，而不是纠正功能。 - dbucki
2
内容还没有准备好，您可以将js移动到文件末尾或执行以下操作
<script>
$(function () { 
    $( '.expand' ).click(function() {
       $( '.img_display_content' ).show();
    });
});

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

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

}

() - 调用方法

没有括号 - 返回属性

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接