Problem with jQuery toggle on 2 objects in IE8
I've got an expanding section on a web page, and I'm using jQUery to create the "expand/collapse" links that, on-click, will toggle each other. It's working in every browser except IE8. In fact, it works perfectly when IE8 is in Compatibility Mode.
What is supposed to happen is that when you click "Expand", the expandable section will slide down and the "Expand" link toggles to "display:none" while the "Collapse" link toggles to "display:inline". This works. However, when you click the "Collapse" link, the "Expand" link never reappears (only in IE8):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Toggle Link Test</title>
</style>
<script type="text/javascript" src="/scripts/jquery.js"></script>
<script type="text/javascript">
$(function(){
$('.search_link').click(function(){
$('.search_link').toggle();
$('#toggle_div').slideToggle();
});
});
</script>
</head>
<body>
<fieldset>
<legend>Search
<a href="javascript: void(0);" class="search_link" style="display: inline;">Collapse [-]</a>
<a href="javascript: void(0);" class="search_link" style="display: none;">Expand [+]</a>
</legend>
<div id="toggle_div">
<p>blah blah blah blah blah blah blah blah</p>
<p>blah blah blah blah blah blah blah blah</p>
<p>blah blah blah blah blah blah blah blah</p>
<p>blah blah blah blah blah blah blah blah</p>
<p>blah blah blah blah blah blah blah blah</p>
<p>blah blah blah blah blah blah blah blah</p>
开发者_如何学编程 </div>
</fieldset>
</body>
</html>
@Dexter: Upgrade your version of jQuery. Anything less than 1.4.4 seems to exhibit the problem you're describing (tested in IE8 with jsFiddle -- http://jsfiddle.net/3KxwC/).
加载中,请稍侯......
精彩评论