Переключение меню и сброс счетчика вызовов

Question

Я начал изучать некоторые JS и jQuery, и я пытаюсь получить меню переключения, которое сбрасывает счетчик кликов в другом меню, когда он открывается.

And here is the JS code

// JavaScript Document 
     var toggleclicks = $('.toggle').data('clicks'); 
     var menuclicks = $('.toggle-menu').data('clicks');  
$(document).ready(function() { 


//WRAPPER// 
    $('.toggle').click(function() { 
     ++toggleclicks; 
     if (toggleclicks%2 === 0) { 
     // even clicks 
     $('.wrapper').css({'margin-top': '-260px'}); 
     $('.icon-menu, .icon-bell').css({'color': '#ABABAB'}); 
     $('.toggle-menu').data('clicks',0) 
     } else { 
     // odd clicks 
     $('.wrapper').css({'margin-top': '0'}); 
     $('.icon-bell').css({'color': 'red'}); 
     $('.contact, .diet, .hours, .classes, .gym').css({'margin-bottom': '-300px'}); 
     $('.main-nav').css({'width': '0'}); 
     $('.icon-menu').css({'color': '#ABABAB'}); 
     } 
    }); 

//NAV BAR// 
    $('.toggle-menu').click(function() { 
     ++menuclicks; 
     if (menuclicks%2 === 0) { 
     // even clicks 
     $('.main-nav').css({'width': '0'}); 
     $('.icon-menu, .icon-bell').css({'color': '#ABABAB'}); 
     $('.toggle').data('clicks',0) 
     } else { 
     // odd clicks 
     $('.main-nav').css({'width': '50%'}); 
     $('.icon-menu').css({'color': 'red'}); 
     $('.icon-bell').css({'color': '#ABABAB'}); 
     $('.wrapper').css({'margin-top': '-260px'}); 
     $('.contact, .diet, .hours, .classes, .gym').css({'margin-bottom': '-300px'}); 
     } 
    }); 

** As you can see, the toggle won't work. любые предложения? **

Спасибо!

Answer 1

Как вы можете видеть на картинке, когда вы используете ===, тип вопросов состояния.

=== соответствует точному типу обоих значений.

поэтому в вашем случае вы сохраняете числовые данные в кликах данных, но пытаетесь получить доступ к '0', который является строкой. Так что это не соответствует.

Вместо этого вы можете просто использовать ==, который будет соответствовать как

Answer 2

Я не знаю, если это то, что вы хотите, но это правильно переключает и вы случай использовать .data в глобалов. Возможно, если вы разместите больше своего кода, я могу дать вам рабочее решение.

var toggleclicks = $('.toggle').data('clicks'); 
var menuclicks = $('.toggle-menu').data('clicks'); 
$(document).ready(function() { 
//WRAPPER// 

$('.toggle').click(function() { 
    ++toggleclicks; 
    if (toggleclicks%2 === 0) { 
    // even clicks // 
    $('.wrapper').css({'margin-top': '-260px'}); 
    $('.icon-menu, .icon-bell').css({'color': '#ABABAB'}); 
    $('.toggle-menu').data('clicks',0) //THIS IS THE OThER MENU 
    } else { 
    // odd clicks 
    $('.wrapper').css({'margin-top': '0'}); 
    $('.icon-bell').css({'color': 'red'}); 
    $('.main-nav').css({'width': '0'}); 
    $('.icon-menu').css({'color': '#ABABAB'}); 
    } 
    //$('.toggle').data("clicks", !toggleclicks); 
}); 
}); 

Answer 3

ОК, iv'e удалось решить эту проблему!

Я избавился от счетчика «кликов» и заменил его на числовой счетчик, с глобальными переменными и линией сброса в конце инструкции else.

// JavaScript Document 
var toggleclicks = 0; 
var menuclicks = 0; 

$(document).ready(function() { 
//WRAPPER// 
    $('.toggle').click(function() { 
     ++toggleclicks; 
     if (toggleclicks%2 === 0) { 
     // even clicks 
     $('.wrapper').css({'margin-top': '-260px'}); 
     $('.icon-menu, .icon-bell').css({'color': '#ABABAB'}); 
     } else { 
     // odd clicks 
     $('.wrapper').css({'margin-top': '0'}); 
     $('.icon-bell').css({'color': 'red'}); 
     $('.contact, .diet, .hours, .classes, .gym').css({'margin-bottom': '-300px'}); 
     $('.main-nav').css({'width': '0'}); 
     $('.icon-menu').css({'color': '#ABABAB'}); 
     menuclicks = 0; 
     } 
    }); 

//NAV BAR// 
    $('.toggle-menu').click(function() { 
     ++menuclicks; 
     if (menuclicks%2 === 0) { 
     // even clicks 
     $('.main-nav').css({'width': '0'}); 
     $('.icon-menu, .icon-bell').css({'color': '#ABABAB'}); 
     } else { 
     // odd clicks 
     $('.main-nav').css({'width': '50%'}); 
     $('.icon-menu').css({'color': 'red'}); 
     $('.icon-bell').css({'color': '#ABABAB'}); 
     $('.wrapper').css({'margin-top': '-260px'}); 
     $('.contact, .diet, .hours, .classes, .gym').css({'margin-bottom': '-300px'}); 
     toggleclicks = 0; 
     } 
    }); 

Вы можете проверить его на http://boazkerengil.com

Спасибо всем за вашу помощь, это было очень полезно.