Question

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

这是不起作用的部分：

  $('.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

目前尚不清楚“无法点击按钮”意味着什么，但您的代码至少有一个问题：每个resize事件将宽度置于540px以下会为{{1}附加一个额外的处理程序click的事件。

在玩窗口时，你可以很容易地得到数百个相同的处理程序，点击元素会导致混乱。

您可以通过重新编写逻辑来解决此问题：

.menuknop

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

这是你想要的吗？

Working Demo

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

函数内部的函数不起作用

3 个答案: