jQuery slideToggle跳转关闭 [英] jQuery slideToggle jump on close

问题描述

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

I'm trying to slideToggle a in a table with jQuery and it works in FF, OP, CHrome. Only IE (6,7,8) is giving me problems. It slides down perfectly down and up, but after the slide up animation is finished. The hidden pops up in full height and then closes.

所以我猜它一定是在它从最小高度切换到display：none之间一小段时间。

So I guess it must be somwhere inbetween when it switches from a minimal height to "display:none" that it appears for a short second.

代码是动态构建的，但我会试着给出一个例子：

The code is built dynamically but I'll try to give an example:

<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的其他问题有关填充，边距或动画问题的描述问题，但一切正常。

Other problems here with slideToggle only descibed problems with padding, margin, or problems with the animation, but that all works.

感谢帮助。

Thx，Spanky

Thx, Spanky

推荐答案

我找到了解决方案。

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

It seems that only jquery's .slideUp() function is causing the problem when setting the height back to 0px. The bug only seems to appear when the browser is working in QuirksMode (HTML Transitional 4.01 DocType) and on IE. The solution I found here is a replacement for .slideUp(). So instead of

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 ），但他们不会修复它。他们说：

Thx to Siderite Zackwehdex wo also reported the bug to jQuery (http://dev.jquery.com/ticket/5062), but they won't fix it. They said:

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

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。

I also found a fix, or replacement for .slideToggle() for everyone who doesn't have the time or control over the HTML to fix it and make it "QuirksMode Clean".

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

Here you'll find an explanation and function that works like a charm. The only change I had to make, was setting the height to '1px' so it won't jump open on the first run of .slideToggle() if elements are hidden from the beginning on.

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

So my working solution finally looks like this:

// 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();
        }
      });
    }
  }

这篇关于jQuery slideToggle跳转关闭的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！