jQuery slideToggle 关闭时跳转

Posted 2023-02-25

【中文标题】jQuery slideToggle 关闭时跳转

【英文标题】：jQuery slideToggle jump on close

【发布时间】：2010-06-09 09:17:09

【问题描述】：

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

感谢您的帮助。

谢谢，斯潘基

【问题讨论】：

你不能滑动表格行，至少不能跨浏览器，不能没有像这样的视觉工件，这是你看到的回流计算。

回流计算？对不起，但我不明白。那么只有 框应该被滑动切换？这就是为什么我在隐藏的 tablerow 中创建了一个 。并且没有隐藏行... 刚刚检查了上一篇文章中的示例***.com/questions/1112726/…，这是我的一种克隆，这可行.....但我的不行

【参考方案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 wo 也向 jQuery (http://dev.jquery.com/ticket/5062) 报告了该错误，但他们不会修复它。他们说：

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

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

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

【参考方案2】：

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

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

【讨论】：

尝试了第一个，在

和 中的 之间添加一个

不起作用.....继续下一个......

现在我尝试将我执行的 javascript 放入回调中 -> 没有帮助，我添加了缩放 CSS -> 不起作用，尝试构建一个也跳转的示例 -> 没有没用……