0

jQueryタブの下に、タブと一緒に上下にスライドするコンテンツがあります。タブは折りたたみ可能で、タブを閉じるとコンテンツも上にスライドします。しかし、タブを切り替えると、コンテンツは所定の位置に留まる必要があるときに上下に移動します。イベントハンドラーを使用してこの問題を解決しようとしましたが、ここhttp://jsfiddle.net/eqUVm/5/を見るとわかるように、問題はまだ存在しています。

誰かが私の問題の可能な解決策を知っていますか？

編集：私は何か重要なことを忘れました：コンテンツ（地図）は絶対位置を必要とします、さもなければそれは表示されません。リンクが更新されました

4

2 に答える 2

1

http://jsfiddle.net/kXS4g/4/を参照してください

タブが選択解除されている場合にのみアニメーション化しています。jQuery uiには明らかに選択解除イベントがないため、「ui-tabs-selected」要素をカウントして選択を確認します（ゼロである必要があります）。残念ながら、このcssクラスは、selectコールバックが実行されるまで削除されないため、私が使用することを選択したハック的なアプローチは、関数呼び出しを遅らせるためにsetTimeoutでした。

また、そのタイミングを微調整することもできsetTimeoutます。私はそれを少しいじりました、そしてあなたが速くクリックしたり、コンピュータがハングしたりすると、それは少し信頼できませんでした。20ms未満のものは感知できません。

stop(false,false)もう1つのトリック（高速切り替えの二重アニメーションを防ぐために使用できます）は、アニメーションが左から続行しようとします。つまり、タブを開いてアニメーションの途中で閉じると、アニメーションはキューに入れられるのではなく、すぐに逆方向に循環します。

問題が発生した場合は、その選択解除を検出するためのより正式な方法を調査することを検討してくださいsetTimeout(..., 20)。私はあなたのためにそれを機能させたかっただけです。

最後に、console.logを使用して、いつイベントが発生したかを把握しました。cssクラスがいつ追加/削除されるかについての仮定と同様に、タブを選択したときにのみselectが起動されるという私の期待は誤りでした。ブレークポイントも同様に機能します（FirebugまたはChromeですぐに利用できます）。マニュアルがこれらの詳細に触れていない場合があります。

于 2012-07-05T16:54:14.517 に答える
0

これはCSSの問題です。divには絶対的な位置が#contentあり、ドキュメントの上部から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 に答える