jQuery UI按钮不会隐藏在IE7中

时间:2010-07-20 15:22:27

标签: jquery css jquery-ui show-hide jquery-ui-button

确定,

我制作了一个推特风格的控制面板,将过滤器和排序应用到列表中, 它的代码是这样的:

<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代码中这个烦人的小错误?

[更新22 / Jul / 10] 我找到了一个暂时的解决方案,但希望找到一些更整洁的东西。 我添加了以下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的第一部分(过滤器/顺序)。

1 个答案:

答案 0 :(得分:1)

你已经找到了原因部分,这里讨论的内容如下: Why does jQuery show/hide use display:none instead of visibility:hidden?

我还认为部分“为什么”是由于IE7非标准的CSS实现/解释(又称bug)。

我相信修复程序在这里概述: Fading issues in Internet Explorer 7 when using jQuery

http://jquery-howto.blogspot.com/2009/02/font-cleartype-problems-with-fadein-and.html