javascript - jQuery slideToggle 在关闭时跳转

Question

我正在尝试使用 jQuery 在表中滑动切换 a，它适用于 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 的其他问题仅描述了填充、边距或动画问题，但一切正常。

感谢您的帮助。

谢谢，斯潘基

Answer 1

我找到了一个解决方案。

当将高度设置回 0px 时，似乎只有 jquery 的 .slideUp() 函数导致了问题。该错误似乎仅在浏览器在 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(); 
});

感谢菱铁矿 Zackwehdex 我也向 jQuery (http://dev.jquery.com/ticket/5062) 报告了这个错误，但他们不会修复它。他们说:

you can just made sure that your document isn't in quirksmode (provide a proper doctype) - which is what we typically recommend when encountering this issue.

我还找到了 .slideToggle() 的修复程序或替代品，适用于没有时间或无法控制 HTML 修复它并使其成为“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();
        }
      });
    }
  }