#4753 closed bug (duplicate)
toggle in IE8
| Reported by: | anthony_au | Owned by: | |
|---|---|---|---|
| Priority: | major | Milestone: | 1.4 |
| Component: | selector | Version: | 1.3.2 |
| Keywords: | Cc: | ||
| Blocked by: | Blocking: |
Description
The following code work in IE6+ IE7 and Firefox, but won't work in IE8
<!DOCTYPE HTML PUBLIC "-W3CDTD HTML 4.01 TransitionalEN" "http://www.w3.org/TR/html4/loose.dtd">
<html> <head>
<title>Testing</title> <script src="jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript"> $(document).ready(function(){
$('.clickable').hover(
function(){
$(this).css("color", "#c77405");
}, function(){
$(this).css("color", "#000000");
}
).each(function() {
$(this).click( function() {
$('#subnode').toggle(500);
});
});
}); </script>
</head> <body>
<h1>Testing</h1>
<table border='1px solid #e78f08'>
<thead>
<tr>
<th width="100%">Title</th>
</tr>
</thead>
<tbody>
<tr>
<td><u id="node" class="clickable">aaa aaaaa aaaaaaaaaa</u></td>
</tr>
<tr id="subnode" style="display:none;padding:0;margin:0;">
<td>hello</td>
</tr>
</tbody>
</table>
</body> </html>
Attachments (1)
Change History (4)
comment:1 Changed 11 years ago by
comment:2 Changed 10 years ago by
another example of this:
<!DOCTYPE html PUBLIC "-W3CDTD XHTML 1.0 TransitionalEN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery IE8 toggle bug</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script>
$(function() {
setup
var column = $("table td:nth-child(2)");
var div = $("div");
error
div.append("<p>At start -> display:" + column.css("display") + "</p>");
column.toggle();
div.append("<p>After 1 toggle -> display: " + column.css("display") + "</p>");
column.toggle();
div.append("<p style=\"color:red;\">After 2 toggles -> display:" + column.css("display") + " <- This should be table-cell or block</p>");
workaround - dont use toggle
column.show();
div.append("<p>After column.show() -> display:" + column.css("display") + "</p>");
});
</script>
<style>
table { border-collapse:collapse; margin:20px; }
td { border:1px solid #ccc; padding:0 5px; }
</style>
</head>
<body>
<p>This is an IE8 issue only. Toggle works only when hiding table cells, but not when it needs to show it.</p>
<table>
<tr>
<td>1</td> <td>2</td> <td>3</td> <td>4</td>
</tr>
<tr>
<td>4</td> <td>3</td> <td>2</td> <td>1</td>
</tr>
</table>
<div></div>
</body>
</html>
comment:3 Changed 10 years ago by
| Component: | unfilled → selector |
|---|---|
| Resolution: | → duplicate |
| Status: | new → closed |
Duplicate of #4512, which has already been fixed.
IE version 8.0.6001.18783 running on Vista x64