html - IE8 中 2 个对象上的 jQuery 切换问题

标签 html hyperlink jquery

我在网页上有一个展开部分,我正在使用 jQUery 创建“展开/折叠”链接,单击这些链接将相互切换。它适用于除 IE8 之外的所有浏览器。事实上,当 IE8 处于兼容模式时,它可以完美运行。

应该发生的情况是,当您单击“展开”时,可展开部分将向下滑动,并且“展开”链接切换为“display:none”,而“折叠”链接切换为“display:inline”。这有效。但是,当您单击“折叠”链接时,“展开”链接永远不会再次出现(仅在 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:升级您的 jQuery 版本。任何低于 1.4.4 的版本似乎都会出现您所描述的问题(在 IE8 中使用 jsFiddle -- http://jsfiddle.net/3KxwC/ 进行测试)。

关于html - IE8 中 2 个对象上的 jQuery 切换问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5380156/

相关文章:

html - <li> 没有父标签?

html - 将链接的 div 保持在普通 div 之后

javascript - 添加事件类以在单击和手动滚动时平滑页面滚动

html - CSS 无序列表,应用链接到背景图片

php - Jquery确认框在取消选择后仍然执行php代码

javascript - jQuery 只允许选定的字符按键功能

php - 如何确定在哪个 div/class 中单击了按钮

html - 无法弄清楚如何删除 div 末尾不必要的空间

jquery - 如何使用 jQuery 更改 float 相反值

vba - 从 HYPERLINK() 运行 VBA