1

このフィドルを見てください

誰もが理由を説明できますか？

a。順序付きリストの番号は、アニメーションが完了するまで表示されません。数字が飛び込んだときにジャークを引き起こします。

b。初めてアコーディオンを閉じた後、数字は戻りません。

ヘッダーを切り替えると、.sublinksのcssがVisibleからHiddenに一度切り替わり、その後元に戻ることはありません。

4

2 に答える 2

1

残念ながら、ジャークの問題を解決する方法がわかりません。残りのコードに基づいて対処する必要があります。ただし、注文したシンボルが消えるという非常に簡単な修正があります。

$(".dropdown").click(function() { 
     $(".sublinks").slideToggle(500, function() {
         ...perform your style changes that you were doing on callback here...
     }); 
});

私があなたに提案できるもう一つのことは、スライド効果の代わりにフェード効果を使ってみることです。リストを「スライド」させて各要素を一度に1つずつフェードインする非常にスムーズなフェード効果を作成でき、スライドよりもはるかにきれいに見えます。また、あなたの要素はそれほどジャンプするべきではありません。スライド効果は、ほぼすべてのブラウザで非常にびくびくしています。フェード効果はすべてのブラウザでサポートされています（ただし、IEはfadeToをサポートしていません）。代わりにフェードを使用することにし、プラグインの作成についてサポートが必要な場合は、お知らせください。喜んでサポートさせていただきます。

幸運を ：）

于 2012-08-14T18:59:09.723 に答える
1

* 編集 *

それを私が直した！このjsFiddleをチェックしてください：http：//jsfiddle.net/QtQjx/

*編集終了*

.sublinksCSSのクラスのパディングが競合しています。

関連するCSSは次のとおりです。

.sublinks {
    display:none;
    list-style-type:none;
    padding:10px 0 20px 55px;
}

.sublinks {
    padding:0;
}

一方では、.sublinksリストを提供するように指示padding:10px 0 20px 55pxし、他方では、パディングをまったく提供しないように指示しています。2番目を取り除き、.sublinks最初のパディング.sublinksを10px 0px20px0pxに変更します。

また、数字が消えたときにドロップダウンを調べると、トップレベルのOLコードが次のように更新されていることがわかりました。

<ol class="loweralpha sublinks" style="display: block; overflow: hidden; height: 335px; margin-top: 10px; margin-bottom: 10px; padding-top: 10px; padding-bottom: 20px; ">

それがどのように起こっているのかを知り、それを排除することができれば、overflow:hiddenあなたはあなたの問題を解決すると思います。

乾杯！

于 2012-08-14T19:15:52.267 に答える