Slide Toggle After Page Resize Bugging - jQuery

Question

Я создал сворачиваемую навигацию, которая отлично работает при загрузке страницы, но при изменении размера окна кажется, что она несколько раз увеличивается и скользит вверх и вниз (может быть только дважды , или может продолжаться до десяти раз).

(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

Я написал сценарий сам, поэтому я уверен, что это легко исправить, я просто не кажется, знаю, что я сделал.

Я думал, возможно, после изменения размера, перезагрузка функции будет хорошим обходным путем, и если да, то каким образом этот эффект может быть достигнут?

Answer 1

Вы добавление события клика при изменении размера окна. Это будет связывать одну и ту же функцию несколько раз с событием клика. Таким образом, лучшим вариантом было бы привязать событие только один раз, который можно было бы сделать на готовом событии. В этом link я ограничил эту привязку в самом событии изменения размера, добавив класс в navi-btn и проверив это.

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

Надеюсь, это даст вам представление.

Спасибо,

Jothi

Answer 2

У меня был быстрый тест и обнаружили, что удаление условие resive и положить его в свою собственную функцию seemd решить проблему

От

$(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(); 
    } 

    }); 
}); 

в

$(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(); 
     } 

    });