javascript - 函数内部的函数不起作用

Question

我正在研究响应式设计，并为菜单设置了一个功能，当它小于 540 像素（用于移动设备）时会发生变化。它确实发生了变化，但我无法单击按钮，我的猜测是这是因为函数内部的函数。

这是不起作用的部分：

  $('.menuknop').click(function(){
      $(".menu").slideToggle();
  });

完整代码：

checkWidth(){
    var windowSize = $(window).width();
    if (windowSize < 540) {
        $(".menu").hide();
        $(".menuknop").show();

        $('.menuknop').click(function(){
            $(".menu").slideToggle();
        });
    }
    else {
        $(".menuknop").hide();
        $(".menu").show();
    }
}

//Execute function
checkWidth();
$(window).resize(checkWidth);

Answer 1

目前尚不清楚“无法单击按钮”是什么意思，但您的代码至少有一个问题：每个将宽度置于 540px 以下的事件resize都会将一个额外的处理程序附加到.click.menuknop

在玩窗口时，您很容易得到数百个相同的处理程序，并且单击元素会导致混乱。

您可以通过修改逻辑来解决此问题：

checkWidth(){
    var windowSize = $(window).width();
    $('.menuknop').click(function(){
        var windowSize = $(window).width(); // calculate again
        if (windowSize < 540) {
            $(".menu").slideToggle();
        }
    });

    var lessThan540 = windowSize < 540;
    $(".menu").toggle(!lessThan540);
    $(".menuknop").toggle(lessThan540);
}

Answer 2

您可以像这样在外部定义点击处理程序 -

var windowSize = 0;
checkWidth() {
    windowSize = $(window).width();
    if (windowSize < 540) {
        $(".menu").hide();
        $(".menuknop").show();
    } else {
        $(".menuknop").hide();
        $(".menu").show();
    }
}

//Execute function
checkWidth();
$(window).resize(checkWidth);


$('.menuknop').click(function () {
    if (windowSize < 540) {
        $(".menu").slideToggle();
    }
});

演示--> http://jsfiddle.net/vmcFH/

Answer 3

这是你想要的吗？

工作演示

 $('.menuknop').click(function(){
      $(".menu").slideToggle();
  });
function checkWidth(){
    var windowSize = $(window).width();
    if (windowSize < 540) {
        $(".menu").hide();
        $(".menuknop").show();
    }
    else {
        $(".menuknop").hide();
        $(".menu").show();
    }
}

$(window).resize(checkWidth);