Функция внутри функции не работает

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

Является ли это то, что вы хотите?

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); 

Answer 2

Это не ясно, что «не может нажать на кнопку» означает, но ваш код в по меньшей мере одна проблема: каждый resize событие, которое устанавливает ширину ниже 540px, добавит дополнительный обработчик к событию 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 3

Вы можете определить обработчик щелчка снаружи, как это -

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

Demo -->http://jsfiddle.net/vmcFH/