Question

我在jQuery选项卡下面有内容，它们随选项卡上下滑动。选项卡是可折叠的，当选项卡关闭时，内容也会向上滑动。但是当我在标签之间切换时，内容也会在它应该保持原位时上下移动。我尝试使用事件处理程序解决此问题，但正如您在此处http://jsfiddle.net/eqUVm/5/所见，问题仍然存在。

有没有人知道我的问题的可能解决方案？

编辑：我忘了一些必要的东西：内容（地图）需要一个绝对的位置，否则它不会显示。链接已更新

Answer 1

请参阅http://jsfiddle.net/kXS4g/4/

我只有在取消选中标签时才会制作动画。在jQuery ui中显然没有取消选择事件，因此我通过计算'ui-tabs-selected'元素来检查选择（应该为零）。不幸的是，直到select回调完成后才删除这个css类，所以我选择使用的hackish方法是setTimeout来延迟函数调用。

您可能还想调整setTimeout的时间。我稍微摆弄了一下，如果你快速点击或计算机挂起，它有点不可靠。任何低于20毫秒的东西都是难以察觉的。

另一个技巧 - 你可以使用stop(false,false)来防止快速切换的双重动画 - 动画会尝试从它离开的地方继续。这意味着，如果您打开选项卡并在动画中途决定关闭它，动画将立即向后循环而不是排队。

如果遇到setTimeout(..., 20)的问题，请考虑调查一种更正式的方法来检测取消选择。我只是想让它适合你。

最后，我使用console.log来了解何时触发事件。我期望select只在你选择tabs时被触发是假的，就像关于添加/删除css类的假设一样。断点可以同样有效（在Firebug或Chrome中很容易获得）。有时手册没有涉及这些细节。

Answer 2

这是一个CSS问题。您对#content div有绝对定位，并且距离文档顶部58px。

试试这个：

#content{
    border:1px solid black;
    margin: .2em;
}

和

.ui-tabs .ui-tabs-panel {
    background: none repeat scroll 0 0 transparent;
    border-width: 0;
    display: block;
    height: 125px; /* Added this */
    padding: 1em 1.4em;
}

从那里算出你的尺寸。

jquery选项卡 - 切换选项卡时，选项卡下方的动态div不应向上滑动

2 个答案: