頁面大小調整後滑動切換 - 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

你是在調整窗口大小的同時添加點擊事件。這將多次將相同的函數綁定到click事件。所以最好的選擇是將事件綁定一次，這可以在準備好的事件上完成。在這個link我通過向navi-btn添加一個類並檢查它來限制resize事件本身的綁定。

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

    });