Question

在开发新网站时，我会定期停止并测试IE6中的所有新功能。这是一种痛苦，但我们还不能放弃支持。

我遇到了JQuerys toogleClass功能的问题。我有一个css样式<button>，点击时可以在加号和减号之间切换。这适用于所有期望IE6的浏览器。

$('#searchForm #toggleButton').toggleClass('more');
$('#searchForm #toggleButton').toggleClass('less');
alert($('#toggleButton').attr('class')); <--- This displays 'less'

首次渲染时，按钮显示正确的图像。单击图像时，所有css样式都会消失。删除了“more”类，但未应用“less”类。放置一个警告框进行调试表明JQuery认为已经正确设置了“less”类，但浏览器尚未应用它。

我尝试使用不同的标签，例如<div>，但同样的问题仍然存在。

欢迎任何帮助

编辑添加了HTML和CSS

HTML

...
<div id="search-panel">
    <form action="/Search" class="search" id="searchForm" method="post"> 
    ...
        <div class="buttons">   
            <button type="submit" id="searchButton"></button>  
            <div class="loading"></div>  
            <button type="button" id="toggleButton" class="more"></button>
        </div>
    </form>
...
</div>
...

CSS

#search-panel .buttons #toggleButton.more { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat 0 -13px;  }
#search-panel .buttons #toggleButton.less { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat;  }

Answer 1

IE6不理解链接CSS，如：

div.class1.class2

将CSS更改为：

#search-panel .buttons .more { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat 0 -13px;  }
#search-panel .buttons .less { width:13px; height:13px; clear:both; float:right; margin:5px 3px 0 0; background:url(../Images/button-search-toggle.png) no-repeat;

这将有效

Answer 2

.toggleClass（className）

className一个或多个类名   （用空格分隔）要切换   对于匹配集中的每个元素。

Source

你不应该像这样编码：

$('#toggleButton').toggleClass('more less');

IE 6 JQuery切换类错误！救命！

2 个答案: