Jquery on click function not reseting on browser resize

У меня есть следующий код, который скользит по столбцу слева направо и подталкивает все справа от столбца справа, а затем обратно (немного похоже на приложение facebook). Он отлично работает с готовым документом, но не при изменении размера. После изменения размера он начинает действовать странно. Как будто он выполняет предыдущую функцию и не регистрирует новую функцию при изменении размера.Jquery on click function not reseting on browser resize

function doMenu() { 

var $trigger = $(".icon-menu-2"); 
var $menu = $(".c_left"); 
var width = $(window).width(); 

if ((width < 870) && (width > 750)) { 
    var status = 'closed'; 

    $('.icon-list').on('click', function(event){ 
     if (status === 'closed'){ 
      $menu.animate({ 
       width: 0, 
       marginLeft: -200, 
       display: 'toggle' 
      }, 'fast'); 
      $(".content_right, .navbar").animate({ 
       marginRight: 0, 
       display: 'toggle' 
      }, 'fast'); 
      return status = 'open'; 

     } else if (status === 'open') { 
      $menu.animate({ 
       width: 200, 
       marginLeft: 0, 
       display: 'toggle' 
      }, 'fast'); 
      $(".content_right, .navbar").animate({ 
       marginRight: -120, 
       display: 'toggle' 
      }, 'fast'); 
      return status = 'closed'; 
     } 
    }); 
} 

if (width < 750) { 

    var status = 'closed'; 
    $('.icon-list').on('click', function(event){ 
     if (status === 'closed'){ 
      $menu.animate({ 
       width: 0, 
       marginLeft: -200, 
       display: 'toggle' 
      }, 'fast'); 
      $(".content_right, .navbar").animate({ 
       marginLeft: 0, 
       display: 'toggle' 
      }, 'fast'); 
      return status = 'open'; 

     } else if (status === 'open') { 
      $menu.animate({ 
       width: 200, 
       marginLeft: 0, 
       display: 'toggle' 
      }, 'fast'); 
      $(".content_right, .navbar").animate({ 
       marginLeft: 200, 
       display: 'toggle' 
      }, 'fast'); 
      return status = 'closed'; 
     } 
    });    

} 

} 
$(document).ready(doMenu); 
$(window).resize(doMenu);

EDIT - изменил переключатель(), чтобы на («нажмите», функция (событие), как это предлагается ниже, но по-прежнему имеют те же проблемы с функциями не работает должным образом на изменение размера

источник

2013-04-04 LeeTee

Эта версия 'тумблер()' осуждался в JQuery 1.7 и удален в 1.9 – adeneo

Ok Ive пытался заменить $ trigger.toggle (функция шоу() {с $ Триг ger.click (функция show() {но это не работает. Можете ли вы помочь с тем, что мне нужно изменить? Большое спасибо – LeeTee

Если вы используете jQuery 1.9 или новее, вам нужно создать свою собственную функцию переключения, так как toggle() будет только переключаться на элементы visiblity. click(), с другой стороны, тоже не будет работать, поскольку он не имеет функций переключения, доступен только один обратный вызов. Вам нужно будет использовать click() и создать функцию переключения с флагом или чем-то подобным. – adeneo

Вместо. тумблер вы можете использовать флаги.

var status = 'closed'; 
$('.foo').on('click', function(event){ 
    if (status === 'closed'){ 
     //... 
     return status = 'open'; 

    } else if (status === 'open') { 
     //.. 
     return status = 'closed'; 

    } 
});

источник

2013-04-04 13:38:21

Jquery on click function not reseting on browser resize

ответ

Смежные вопросы