4

我正在尝试使用 jQuery 在表格中滑动切换 a，它适用于 FF、OP、CHrome。只有 IE (6,7,8) 给我带来了问题。它完美地向下和向上滑动，但是在向上滑动动画完成之后。隐藏的全高弹出，然后关闭。

所以我想当它从最小高度切换到“显示：无”时，它一定是介于两者之间，它会出现一秒钟。

代码是动态构建的，但我将尝试举一个例子：

<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 的其他问题仅描述了填充、边距或动画问题，但这一切都有效。

帮助表示赞赏。

谢谢，打屁股

4

2 回答 2

2

我找到了解决方案。

将高度设置回 0px 时，似乎只有 jquery 的 .slideUp() 函数会导致问题。只有当浏览器在 QuirksMode (HTML Transitional 4.01 DocType) 和 IE 上运行时，才会出现该错误。我在这里找到的解决方案是 .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 wo 也向 jQuery ( http://dev.jquery.com/ticket/5062 ) 报告了该错误，但他们不会修复它。他们说：

您只需确保您的文档不处于 quirksmode（提供正确的文档类型）——这是我们在遇到此问题时通常建议的方式。

我还为没有时间或无法控制 HTML 来修复它并使其“QuirksMode Clean”的每个人找到了 .slideToggle() 的修复或替代方法。

在这里，您会找到一个解释和功能，就像一个魅力。我必须做的唯一更改是将高度设置为“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();
        }
      });
    }
  }
于 2010-06-10T09:34:19.407 回答
0

查看这个问题/答案和这个答案（关于如何使用回调函数）。

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

于 2010-06-09T13:18:22.950 回答