jquery - 在 IE7 上使用 jQuery 时的隐藏内容

Question

我使用 jQuery 通过向上/向下滑动面板在“简单”和“高级”搜索面板之间切换。在幻灯片之后我想将输入焦点设置到第一个字段，但这会导致面板在 IE7 上空白。它不会发生在 FF 3.5.1

原始代码使用的是 ASP.NET，但我已经设法用下面的一些简单的 HTML 和 JavaScript 重现了它。我第一次尝试基于表格而不是div，但出现了同样的问题。

我认为这可能是躲猫猫错误，但我尝试了一些建议的修复(position:relative，缩放:1)但没有成功。

当演示页面打开时，会显示简单的搜索 div，当您单击“高级”按钮时，高级面板会向下滑动，但随后会隐藏。如果您调整窗口大小，它会再次显示。删除对 focus() 的 jquery() 调用可以解决问题。

$(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 中的问题。我已经完成了所有的 hack——缩放、位置、z-index 等，最终我为那些该死的浏览器添加了一些额外的代码。

在大多数情况下，我可以通过使用 jQuery 在动画函数运行后通过添加或减去 1 个像素来动态更改正在播放躲猫猫的元素的尺寸来解决。

我承认这无论如何都不是“完美的”，但它可以完成工作，有时这就是我们所有的时间或资源。

您可以在此处找到有关使用 jQuery 进行特定浏览器检查的更多信息:http://api.jquery.com/jQuery.browser/

或者，在 block 内使用如下代码也可能有用:

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