jQuery show/hide not working
Question
I have a basic html page with some JS and CSS:
$('.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>
A click on the div with the class expand does nothing... I also have tried to copy/paste an example code from jQuery website but it also didn't work. Can anyone help me with this problem?
6 answers
solution1
13 ACCPTED 2014-04-20 21:17:33
Just add the document ready function, this way it waits until the DOM has been loaded, also by using the :visible pseudo you can write a simple show and hide function.
$(document).ready(function(){
$( '.expand' ).click(function() {
if($( '.img_display_content' ).is(":visible")){
$( '.img_display_content' ).hide();
} else{
$( '.img_display_content' ).show();
}
});
});
solution2
5 2014-04-20 21:17:27
Demo
$( '.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/
"Display or hide the matched elements."
This is much shorter in code than using show() and hide() methods.
solution3
3 2014-04-20 21:15:14
Use this
<script>
$(document).ready(function(){
$( '.expand' ).click(function() {
$( '.img_display_content' ).show();
});
});
</script>
Event assigning always after Document Object Model loaded
solution4
2 2014-04-20 21:18:11
The content is not ready yet, you can move your js to the end of the file or do
<script>
$(function () {
$( '.expand' ).click(function() {
$( '.img_display_content' ).show();
});
});
So that the document waits to be loaded before running.
solution5
0 2020-12-10 20:24:57
if (grid.selectedKeyNames().length > 0) {
$('#btnRemoveFromList').show();
} else {
$('#btnRemoveFromList').hide();
}
}
() - calls the method
no parentheses - returns the property
solution6
0 2022-07-20 22:43:19
In my case it wasn't working because the containing div I was trying to hide had Bootstrap flex properties applied inline in the html. Once I moved everything into a parent div without any bootstrap classes, now hide works.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.