1

ページの読み込み時に問題なく動作する折りたたみ可能なナビゲーションを作成しましたが、ウィンドウのサイズを変更すると、トリッピーになり、何度も上下にスライドするように見えます (2 回だけ、または最大 10 回まで続く可能性があります)。 .

(function ($) {
$.fn.myfunction = function () {
    $(".navi-btn").hide();    
    $(".navigation").show();
};
})(jQuery);

(function ($) {
$.fn.mysecondfunction = function () {
    $(".navi-btn").show();
    $(".navigation").hide();
    $(".navi-btn").click(function () {
        $(".navigation").slideToggle();
    });
    $("li").click(function () {
        $(".navigation").slideToggle();
    });
    $("#width").text("too small");
};
})(jQuery);


$(document).ready(function () {
var width = $(window).width();
if (width > 400) {
    $('#width').myfunction();
} else {
    $('#width').mysecondfunction();
}

$(window).resize(function () {
    var width = $(window).width();
    if (width > 400) {
        $('#width').myfunction();
    } else {
        $('#width').mysecondfunction();
    }

   });
 });

ここに「動作する」デモjsfiddleがあります

私は自分でスクリプトを書いたので、簡単な修正があると確信しています。

おそらくサイズ変更後に、関数をリロードすることが良い回避策になると考えていました。もしそうなら、どうすればこの効果を達成できますか?

4

2 に答える 2

0

ウィンドウのサイズ変更中にクリックイベントを追加しています。これにより、同じ関数がクリック イベントに複数回バインドされます。したがって、最良のオプションは、イベントを一度だけバインドすることです。これは、準備完了イベントで実行できます。このリンクでは、クラスを navi-btn に追加してチェックすることで、サイズ変更イベント自体でこのバインディングを制限しました。

$(".navi-btn").not(".binded").addClass("binded").click(function () {
    $(".navigation").slideToggle();
});

これがあなたにアイデアを与えることを願っています。

ありがとう、

ジョティ

于 2013-08-26T18:23:13.423 に答える