4

私は次のJqueryを持っています：

$("#collapse-menu > li > a").click(function() {
    $(this).toggleClass("expanded").toggleClass("collapsed").find("+ ul").slideToggle("medium");
});

基本的には、ドロップダウンを含むネストされた「リスト」のメニューを展開または折りたたみます（簡略化された例）。

<ul id="collapse-menu">
   <li><a class="expanded">Basic Details</a>
      <ul>
         <li>
            <select> .... </select>
         </li>
         <li>
            <select> .... </select>
         </li>

ドロップダウンのいずれかで大きな値が選択されている場合を除いて、コードは完全に正常に機能します。その時点で、クリックすると、メニューは正しく展開/折りたたまれますが、そうしている間、要素全体が何らかの方法でリセットされているかのように、すばやく「点滅」します。データ自体は問題ありませんが、不要なのは点滅です。

奇妙なことに、ドロップダウンで小さな値を選択すると、点滅しません。大きな値を選択すると（たとえば、18〜99歳のドロップダウンで30を超える場合）、点滅が始まります。

なぜこれが起こっているのか誰か教えてもらえますか？または、これを引き起こしているJqueryについて何か正しくないことがあるかどうか。

ありがとう。

アップデート：

これに賞金を追加します。ネット上でいくつかの同様のプラグイン/ソリューションを試しましたが、デフォルトで大きなドロップダウン値が選択されている場合、それらはすべてこの「点滅」の問題に悩まされているようです。

それが役立つ場合は、典型的な同様の解決策があります：http ://www.i-marco.nl/weblog/jquery-accordion-menu/index_collapsed.html# ...しかし、ドロップダウンが内部に追加されると、同じ問題が発生します。アコーディオン。

どういうわけかこれをハックする必要はなく、誰かがクリーンな解決策を持っていることを願っています。

4

4 に答える 4

3

私の観察から：問題はオペレーティングシステムに依存しているようです。選択はシステム コントロールであるため、システムによって描画されます。私の Linux マシンでは、http://jsbin.com/ixakeの例の点滅アニメーションに問題はありません。Windows（r）でテストしたと思います

選択が再描画されるたびに適切な値に「スクロール」されているようです。そして、それはアニメーション中によく起こります。

最も簡単な解決策は、システムの選択を html ベースの選択に置き換えて、システムの依存関係を取り除くことです。あなたのためにそれを行う目立たないjqueryプラグインがあります.

最初のものがあまり良くなかった場合は、これを試すか、ここから選択してください。

その後、アニメーションは JS とスタイリングのみに依存する必要があります。

于 2010-04-14T10:48:01.777 に答える
2

問題は、要素のサイズが変更されるたびに、選択した要素までドロップダウンがスクロールし、点滅が発生することだと思います。

答えは、各選択をjavascriptに保存し(変更時など)、アニメーションが開始されたときに値の選択を解除し、アニメーションが停止したときにそれを復元することです。これにより、ユーザーの選択を維持しながら、小さな値を選択した場合と同じパフォーマンスが得られます。

また、移行段階にある間はフォームを送信できないようにすることもできます。そうしないと、悪い値が戻ってきます。

于 2010-04-13T03:48:36.513 に答える
1

できることは、ul をアニメーション化する前に選択リストを無効にすることです。

        $("#collapse-menu > li > a").click(function() {
            $(this)
                .toggleClass("expanded").toggleClass("collapsed")
                .find("+ ul").find("select").attr("disabled","disabled").end()
                .slideToggle("medium",function(){
                    $(this).find("select").each(function(){this.disabled=false;});
                });
        });

それを試して報告してください。

無効化された選択リストをスタイル (CSS) して、無効化されていないものと同じに見えるようにしたいでしょう。

ノート

上記には、フォームが送信されたときに選択した値が送信されないという副作用があります。これが問題である場合は、アニメーション化する前に、選択したオプションを除くすべてのオプションを選択リストから削除し、アニメーションが完了したらそれらをすべて追加することをお勧めします。それがうまくいかない場合は、HTML スタイルの選択リストを使用するという naugtur の提案がおそらく最良のオプションです。

ps選択リストで読み取り専用属性を使用しようとすることを気にしないでください...存在しません。

于 2010-04-14T12:20:59.967 に答える
1

個人的には、オートコンプリートが本当に良い方法だと思います。しかし、偽の短い選択を代用して長い選択を非表示にすると、スライドがよりスムーズになるという考えがありました。私がテストした 1 つのブラウザー (Firefox 3.0.18) ではうまく動作するようです。コードはおそらくクリーンアップされる可能性があり、内部スクロールバーが原因で選択がデフォルトでサイズと一致しない場合があるというバグがありますが、偽造するのはそれほど難しくありません.

$("#collapse-menu > li > a").click(function() {
    var was_expanded = $(this).hasClass('expanded');
    var uls = $(this).toggleClass("expanded").toggleClass("collapsed").find('+ ul');
    if (was_expanded) {
        $(this).parent().find('select').each(function() {
            var fake = $('<select class="fake"><option>' + $(this).val() + '</option></select>');
            $(this).parent().append(fake);
            $(this).hide();
        })
        uls.slideUp('medium', function() { });
    } else {
        $('.fake').remove();
        $('select').show();
        uls.slideDown('medium', function() { });
     }
});
于 2010-04-13T03:26:11.720 に答える