Question

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

上

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

我认为这可能是躲猫猫的错误，但我尝试了一些建议的修复（位置：相对，缩放：1），但没有运气。

当打开演示页面时，会显示简单搜索div，当您单击“高级”按钮时，高级面板会向下滑动，但随后会隐藏。如果您调整窗口大小，则会再次显示。删除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，我之前遇到过相同/类似的情况，其中NOTHING似乎解决了IE7或IE6中的问题。我已经完成了所有的黑客攻击 - 缩放，位置，z-index等，最终我最终为那些爆破的浏览器添加了额外的代码。

大多数情况下我可以通过使用jQuery动态更改正在播放peekaboo的元素的尺寸，通过在动画函数运行后添加或减去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() {

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

2 个答案: