1

このスクリプトを使用して、ページのレイアウトを切り替えています。

$("span.switcher").click(function () {
    $("span.switcher").toggleClass("swap"); /*!*/
    $("ol.search-results").fadeOut("fast", function() {
        $(this).fadeIn("fast").toggleClass("grid");
});

スクリプトは正常に動作します。私が抱えている問題は、スイッチ ビューがページの下にある場合、レイアウトが変更され、ページがジャンプして戻ることです。

/* が表示されている場所に「return false」を追加すると、 ! */ 2 行目でスクリプトが機能しません。

また、ご覧のとおり、 < a > 以外の要素を使用するとページがジャンプしなくなると言われたので、 < a > の代わりに < span > を使用しています。

ページのジャンプを修正する方法はありますか?

ありがとう。

4

2 に答える 2

2

関数呼び出しでイベントを参照し、その上でPropagationを停止する必要があります。

$("span.switcher").click(function (event) {

    event.stopPropagation();

    $("span.switcher").toggleClass("swap"); /*!*/
    $("ol.search-results").fadeOut("fast", function() {
        $(this).fadeIn("fast").toggleClass("grid");
    });

});

これにより、クリックがこのバインディング以外に通知されなくなります。

于 2010-05-19T22:23:18.320 に答える
2

このブログ投稿で言及されているように、ページが上にスクロールされるのは、

fadeOut は css プロパティの display を none に設定します。

ブログにも記載されている解決策は、次のようにandfadeTo()の代わりに使用することです。fadeOut()fadeIn()

$("span.switcher").click(
    function () {
        $("span.switcher").toggleClass("swap");
        $("ol.search-results").fadeTo("fast", 0,
            function () {
                $(this).fadeTo("fast", 1).toggleClass("grid");
            }
        );
    }
);


aの代わりに要素 を使用することに関して、リンクのデフォルトの動作 (属性がspanの場合にページの上部にジャンプする) を防ぐためにいくつかのことができます。これを行う方法とその影響については、このSO の質問で説明しています。href"#"

于 2010-05-19T22:31:26.600 に答える