I'm using code to changing functionality depending on browser window. It is working but not on resize window. It always need to reload the page to get effective on size of the window.
if ($(window).width() > 1024) {
$('.has-children').children('a').on('click', function(event){
if( !checkWindowWidth() ) event.preventDefault();
var selected = $(this);
if( selected.next('ul').hasClass('is-hidden') ) {
selected.addClass('selected').next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('moves-out');
selected.parent('.has-children').siblings('.has-children').children('ul').addClass('is-hidden').end().children('a').removeClass('selected');
$('.insided-overlay').addClass('is-visible');
} else {
selected.removeClass('selected').next('ul').addClass('is-hidden').end().parent('.has-children').parent('ul').removeClass('moves-out');
$('.insided-overlay').removeClass('is-visible');
}
});
}
else {
$(".has-children").click(function(){
$(this).find(".insided-secondary-nav").slideToggle();
$(this).find(".has-children .is-hidden").slideToggle();
$(this).find(".insided-secondary-nav").removeClass('is-hidden');
});
}
Can anyone tell me how can bind this with windows resize function?
Thanks