好的,
我制作了一个 Twitter 风格的控制面板来对列表应用过滤器和排序, 它的代码是这样的:
<div id="drawer">
<div id="orderDrawer" class="subDrawer" >
<div class="closeDrawer clearfix ui-icon ui-icon-closethick">close</div>
<h4>sorteer</h4>
<div id="orderPanel">
<!--some content-->
</div>
</div>
<div id="filterDrawer" class="subDrawer" >
<div class="closeDrawer clearfix ui-icon ui-icon-closethick">close</div>
<h4>Filters</h4>
<div id="filterPanel">
<!-- some content -->
</div>
<div id="filterButtonBar" class="drawerButtons">
<button id='applyFilter' name='applyFilter'>Apply</button>
</div>
</div>
</div>
这与以下 JS 代码一起工作:
$("#orderPanelButton").click( function(){
if( $(".subDrawer[id!=orderDrawer]").is(":visible") ) {
$("#drawer").slideUp( function() {
$(".subDrawer").hide();
$("#orderDrawer").show();
$("#drawer").slideDown();
});
} else {
$(".subDrawer").hide();
$("#orderDrawer").show();
$("#drawer").slideToggle();
}
});
$("#filterPanelButton").click( function(){
if( $(".subDrawer[id!=filterDrawer]").is(":visible") ) {
$("#drawer").slideUp( function() {
$(".subDrawer").hide();
$("#filterDrawer").show();
$("#drawer").slideDown();
});
} else {
$(".subDrawer").hide();
$("#filterDrawer").show();
$("#drawer").slideToggle();
}
});
最后我使用 jQuery UI 按钮来塑造按钮:
$("#applyFilter").click(function(){
$("#filterForm").submit();
});
$("[name='applyFilter']").button({icons: {
primary:'ui-icon-arrowreturnthick-1-e'}});
这在所有经过测试的浏览器(FF、chrome、IE8)中都很好用,但在 IE7 中却不行。在那里,当我使用必要的隐藏和 slideToggles 将 #drawer 的内容从 'filter' 更改为 'order' 时,出现 applyFilter 按钮的空幽灵。将鼠标悬停在其上时会消失的幽灵。
这里有人知道为什么会发生这种情况,以及我如何才能摆脱我的 IE7 代码中这个恼人的小错误?
[2010 年 7 月 22 日更新] 我找到了一个临时解决方案,但希望找到更整洁的东西。 我添加了以下 JS,基于 PHP 的 MSIE 7.0 检测:
$(".subDrawer[id!=' . $drawer . 'Drawer]").find("button").each(function(){
$(this).css("display","none");
});
$(".subDrawer[id=' . $drawer . 'Drawer]").find("button").each(function(){
$(this).css("display","");
});
其中 $drawer = subDrawer ID 的第一部分(过滤器/顺序)。
最佳答案
您已经略微触及了原因部分,将在此处讨论: Why does jQuery show/hide use display:none instead of visibility:hidden?
我还认为部分“原因”是由于 IE7 非标准 CSS 实现/解释(也称为错误)。
我相信这里列出了修复方法: Fading issues in Internet Explorer 7 when using jQuery
和 http://jquery-howto.blogspot.com/2009/02/font-cleartype-problems-with-fadein-and.html
关于jQuery UI 按钮不会在 IE7 中保持隐藏状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3291559/