Кнопка пользовательского интерфейса jQuery не будет скрыта в IE7 - PullRequest
Новая
       23

Кнопка пользовательского интерфейса jQuery не будет скрыта в IE7

4 голосов
/ 20 июля 2010

Хорошо,

Я создал панель управления в стиле твиттера для применения фильтров и сортировки к списку, код для него такой: 

<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. Там, когда я меняю содержимое #drawer с 'filter' на 'order' с необходимыми скрытиями и slideToggles, появляется пустой призрак кнопки applyFilter. Призрак, который исчезнет, ​​когда вы наведете на него курсор.

Кто-нибудь здесь понял, почему это происходит и как я могу избавиться от этой надоедливой небольшой ошибки в моем коде для IE7?

[обновление 22 июля / 10] Я нашел временное решение, но надеюсь найти что-то более опрятное. Я добавил следующий JS, основанный на обнаружении MSIE 7.0 с помощью PHP: 

$(".subDrawer[id!=' . $drawer . 'Drawer]").find("button").each(function(){
   $(this).css("display","none");
});

$(".subDrawer[id=' . $drawer . 'Drawer]").find("button").each(function(){
    $(this).css("display","");
});

Где $ box = первая часть идентификатора subDrawer (фильтр / заказ).

1 Ответ

1 голос
/ 20 августа 2010

Вы уже немного затронули часть "почему", о чем мы поговорим здесь: Почему jQuery показывает / скрывает использование отображения: нет вместо видимости: скрыто?

Я также думаю, что часть «почему» связана с нестандартной реализацией / интерпретацией CSS в IE7 (она же ошибка).

Я полагаю, что исправление изложено здесь: Проблемы с исчезновением в Internet Explorer 7 при использовании jQuery

и http://jquery -howto.blogspot.com / 2009/02 / FONT-ClearType-проблемы-с-FadeIn-and.html

...