Question

我正在尝试使用jQuery在一个表格中滑动，它可以在FF，OP，CHrome中运行。只有IE（6,7,8）给我带来了麻烦。它完全向下和向下滑动，但在滑动动画完成后。隐藏的弹出全高，然后关闭。

所以我猜它在从最小高度切换到“display：none”之间它必定会在短时间内出现。

代码是动态构建的，但我会尝试举例：

<table>
<tr>
    <td>
        <script type="text/javascript">
            function toggleTr_{$dynamicID}() {
                $('#content_{$dynamicID}').slideToggle('slow');
                /* DO SOME OTHER STOFF LIKE COLOR CHANGES CSS CLASS CHANGES */
            }
        </script>
    </td>
</tr>
<tr id="list_{$dynamicID}" onclick="toggleTr_{$dynamicID}();" style="cursor:pointer;">
    <td> <!-- INFO HEADER --> </td>
</tr>
<tr>
    <td>
        <div id="content_{$dynamicID}" style="display:none;">
         <!-- INFO BODY HIDDEN --> 
        </div
    </td>
</tr>

使用slideToggle的其他问题仅描述了填充，边距或动画问题，但这一切都有效。

非常感谢帮助。

Thx，Spanky

Answer 1

我找到了解决方案。

似乎只有jquery的.slideUp（）函数在将高度设置回0px时才会导致问题。当浏览器在QuirksMode（HTML Transitional 4.01 DocType）和IE上工作时，似乎只会出现该错误。我找到的解决方案here是.slideUp（）的替代品。而不是

targetElement.slideUp(speed,callBack)

你写了

var h = target.height();
var cssHeight=target.css('height');
target.animate({ 
    height: '1px' }, speed, function() { 
    target.hide();
    target.height(h);
    target.css('height',cssHeight);
    callBack(); 
});

对于Siderite Zackwehdex我也报告了jQuery（http://dev.jquery.com/ticket/5062）的错误，但他们不会解决它。他们说：

您可以确保您的文档不在quirksmode中（提供正确的doctype） - 这是我们在遇到此问题时通常建议的。

我还为没有时间或控制HTML的每个人找到了修复或替换.slideToggle（）以修复它并使其成为“QuirksMode Clean”。

Here你会找到一个像魅力一样的解释和功能。我必须做的唯一改变是将高度设置为'1px'，这样如果元素从头开始隐藏，它将不会在第一次运行.slideToggle（）时跳转。

所以我的工作解决方案最终看起来像这样：

// this is a fix for the jQuery slide effects
  function slideToggle(el, bShow){
    var $el = $(el), height = $el.data("originalHeight"), visible = $el.is(":visible");

    // if the bShow isn't present, get the current visibility and reverse it
    if( arguments.length == 1 ) bShow = !visible;

    // if the current visiblilty is the same as the requested state, cancel
    if( bShow == visible ) return false;

    // get the original height
    if( !height ){
      // get original height
      height = $el.show().height();
      // update the height
      $el.data("originalHeight", height);
      // if the element was hidden, hide it again
      if( !visible ) $el.css({height: '1px'}).hide();
    }

    // expand the knowledge (instead of slideDown/Up, use custom animation which applies fix)
    if( bShow ){
      $el.show().animate({height: height}, {duration: 500});
    } else {
      $el.animate({height: '1px'}, {duration: 500, complete:function (){
          $el.hide();
        }
      });
    }
  }

Answer 2

查看this question/answer和this answer（关于如何使用回调功能）。

您也可以使用zoom fix在IE中解决您的问题。

jQuery slideToggle跳转关闭

2 个答案: