Question

我的汉堡菜单有点击事件。要正确定位此菜单，我使用了几个变量。我唯一的问题是当屏幕尺寸发生变化时我需要更新这些变量的值，以便菜单始终保持在正确的位置。我已经尝试使用jQuery（窗口）.resize函数重置值，但它不工作，我不明白为什么。

jQuery("#button").click(function(){
    var nav = jQuery("#nav_container");
    var head_h = jQuery('#fullhead_wrap').height();
    var nav_height = jQuery(window).height() - head_h;

    jQuery(window).resize(function(){
        var new_head_h = jQuery('#fullhead_wrap').height();
        head_h = new_head_h;

        var new_nav_height = jQuery(window).height() - new_head_h;
        nav_height = new_nav_height;
    });

    jQuery("#button span").toggleClass("open");
    jQuery("body").toggleClass("overflow");
    jQuery('.header_nav li').toggleClass('link_fall');
    nav.toggleClass('menu_open');

    nav.height(nav_height);

    if(nav.hasClass('menu_open')){
        nav.css('top', head_h);
    }else{
        nav.css('top', '0');
    }
});

Answer 1

问题在于，您在resize event中嵌套了click event。你应该将它分开以使其发挥作用。

var variables_which_are_used_by_both_events; //...
// put this variables here such as nav_height and head_h
// In some cases it's better to update their value in each event 

jQuery(window).resize(function(){
    var nav = jQuery("#nav_container");
    var head_h = jQuery('#fullhead_wrap').height();
    var nav_height = jQuery(window).height() - head_h;
});

jQuery("#button").click(function(){
    var nav = jQuery("#nav_container");
    var head_h = jQuery('#fullhead_wrap').height();
    var nav_height = jQuery(window).height() - head_h;
   // your code...
});

如何在click事件jQuery中的resize上更新变量值

1 个答案: