Скрытый контент при использовании jQuery в IE7

Question

Я использую jQuery для переключения между «простыми» и «расширенными» поисковыми панелями, перемещая их вверх / вниз.После слайда я хочу установить фокус ввода на первое поле, однако это приводит к тому, что панель IE7 перестает работать.Это не происходит в FF 3.5.1

. Исходный код использует ASP.NET, но мне удалось воспроизвести его с помощью простого HTML и JavaScript ниже.Моя первая попытка была основана на таблицах, а не на div, но возникла та же проблема.

Я думал, что это может быть ошибка в peekaboo, но я попробовал некоторые из предложенных исправлений (position :lative, zoom: 1), но нетудачи.

Когда открывается демонстрационная страница, отображается простой элемент поиска, при нажатии на кнопку «Дополнительно» расширенная панель сдвигается вниз, но затем скрывается.Если вы измените размер окна, оно будет показано снова.Удаление вызова jquery () для focus () устраняет проблему.

$(document).ready(function() {

  $("#btnSwitchAdvanced").click(function() {
    $("#simpleSearchPanel").slideUp(200, function() {
      $("#advSearchPanel").slideDown(500, function() {
        $("#txtASDescription").focus();
      });
    });
  });

  $("#btnSwitchSimple").click(function() {
    $("#advSearchPanel").slideUp(200, function() {
      $("#simpleSearchPanel").slideDown(500, function() {
        $("#txtSimpleSearch").focus();
      });
    });
  });

  $("#advSearchPanel").hide();
});

.criteriaRow
{
  clear:both;
} 

.criteriaLabel
{
  float:left;
  width:200px;
}              

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="searchPanel" style="background-color: #dcdcdc; margin-top: 5px;">
    <div id="searchCriteria">
        <div id="simpleSearchPanel">
            <span>Simple Search</span>
            <input type="text" id="txtSimpleSearch" />
            <input type="button" id="btnSwitchAdvanced" value="Switch to Advanced" />
        </div>
        <div id="advSearchPanel">
            <span>Advanded Search</span>
            <div>
                <div class="criteriaRow">
                    <div class="criteriaLabel">
                        <span id="lblASDescription">Description:</span>
                    </div>
                    <div class="criteriaInput">
                        <input  type="text" id="txtASDescription" />
                    </div>
                </div>

                <div class="criteriaRow">
                    <div class="criteriaLabel">
                        <span id="lblASId">Id:</span>
                    </div>
                    <div class="criteriaInput">
                        <input name="txtASId" type="text" id="txtASId" />
                    </div>
                </div>
            </div>

            <div>
                <div id="criteriaActions" style="float:left;">
                    <input type="button" id="btnSwitchSimple" value="Switch To Simple" />
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

@ canice, я сталкивался с такой же / похожей ситуацией и раньше, когда кажется, что НИЧТО не решает проблему в IE7 или IE6. Я сделал все хаки - масштабирование, положение, z-индекс и т. Д., И в конечном итоге я добавил дополнительный бит кода для этих проклятых браузеров.

В большинстве случаев я могу решить, используя jQuery для динамического изменения размеров элемента, который играет в прятки, добавляя или вычитая 1 пиксель после запуска функции анимации.

Я признаю, что это ни в коем случае не "идеально", но оно выполняет свою работу, а иногда это все, на что у нас есть время или ресурсы.

Вы можете найти больше информации о проверке браузера с помощью jQuery здесь: http://api.jquery.com/jQuery.browser/

В качестве альтернативы, использование кода внутри блоков, таких как следующие, также может быть полезно:

<!--[if lte IE 6]>
<script type="text/javascript">
$(document).ready(function() {
    $(element).dostuff();
});
</script>
<![endif]-->

Answer 2

у меня это работает в ie8 после переключения этой строки:

 $("#advSearchPanel").slideDown(500, function() {

к этой строке:

 $("#advSearchPanel").show(function() {