0

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

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

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

4

2 回答 2

1

见http://jsfiddle.net/kXS4g/4/

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

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

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

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

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

于 2012-07-05T16:54:14.517 回答
0

这是一个 CSS 问题。您在#contentdiv 上有绝对定位，并且它被放置在距离文档顶部 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;
}

并从那里计算出你的尺寸。

于 2012-07-05T16:00:08.537 回答