关于javascript：jQuery slideToggle关闭


jQuery slideToggle jump on close

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

因此，我想当它从最小高度切换到" display：none"时，一定会出现一小段时间。

该代码是动态构建的，但我将尝试给出一个示例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<table>
<tr>
    <td>
        <script type="text/javascript">
            function toggleTr_{$dynamicID}() {
                $('#content_{$dynamicID}').slideToggle('slow');
                /* DO SOME OTHER STOFF LIKE COLOR CHANGES CSS CLASS CHANGES */
            }
       
    </td>
</tr>
<tr id="list_{$dynamicID}" onclick="toggleTr_{$dynamicID}();" style="cursor:pointer;">
    <td> <!-- INFO HEADER --> </td>
</tr>
<tr>
    <td>
       
         <!-- INFO BODY HIDDEN -->
        </div
    </td>
</tr>

slideToggle的其他问题仅涉及填充，边距或动画问题，但都可以解决。

感谢帮助。

Thx，Spanky

相关讨论

我找到了解决方案。

似乎只有jquery的.slideUp()函数将高度设置回0px时才引起问题。仅当浏览器在QuirksMode(HTML Transitional 4.01 DocType)和IE上工作时，才会出现该错误。我在这里找到的解决方案是.slideUp()的替代品。所以代替

1
targetElement.slideUp(speed,callBack)

你写

1
2
3
4
5
6
7
8
9
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)报告了该错误，但他们无法解决。他们说：

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.

我还为没有时间或无法控制HTML的每个人找到了一个修复程序或.slideToggle()的替代者，以解决此问题并使其" QuirksMode Clean"。

在这里，您将找到一个解释和功能，就像一个魅力。我唯一要做的更改是将高度设置为" 1px"，因此，如果从头开始隐藏元素，则在第一次运行.slideToggle()时它不会跳开。

因此，我的工作解决方案最终如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
// 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();
        }
      });
    }
  }

查看此问题/答案和答案(有关如何使用回调函数)。

您也可以使用缩放修复来解决IE中的问题。

相关讨论