remove/add class on window resize jquery

Question

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

(function() { 
var $window = $(window), 
    $ul = $('ul.nav'); 

$window.resize(function(){ 
    if ($window.width() < 979) { 
     return $ul.addClass('float'); 
    }else{ 

    $ul.removeClass('float')}; 
}).trigger('resize'); 
}); 

.Float не определен с помощью .css. Это просто, если подменю (динамически генерируемое в области администратора) становится слишком большим, чтобы вписаться в контейнер.

Вот код для генерации «поплавок-эффект», когда подменю с большим

$('.float > li.dropdown > a + ul').each(function(index, element) { 
    // IE6 & IE7 Fixes 
    if ($.browser.msie && ($.browser.version == 7 || $.browser.version == 6)) { 
    var category = $(element).find('a'); 
    var columns = $(element).find('ul').length; 

    $(element).css('width', (columns * 143) + 'px'); 
$(element).find('ul').css('float', 'left'); 
    }  

    var menu = $('.float').offset(); 
    var dropdown = $(this).parent().offset(); 

    i = (dropdown.left + $(this).outerWidth()) - (menu.left +  $('.float').outerWidth()); 

    if (i > 0) { 
     $(this).css('margin-left', '-' + (i + 5) + 'px'); 
    } 
}); 

Вот часть начала кода меню

<?php if ($categories) { ?> 
    <div class="menu"> 
<ul class="nav float"> 
<?php foreach ($categories as $category) { ?> 
<li class="dropdown"><a href="<?php echo $category['href']; ?>"> 
    <?php echo $category['name']; ?></a> 
    . 
    . 
    . 
    . 
    ecc. 

Любые другие идеи для удаления/добавить класс «.float» при изменении размера окна? Заранее благодарим за любой отзыв.

EDIT

После попытки немного, я нашел альтернативное решение с запросом .css

@media (max-width: 979px) 

Сейчас он работает, но я до сих пор не могу понять, почему JQuery изменение размера не работает.

Answer 1

Надеюсь, это поможет.

var $window = $(window), 
    $ul = $('ul.nav'); 

$(window).on('resize', function() { 
    if ($window.width() < 979) { 
     $ul.addClass('float'); 
    }else{ 

    $ul.removeClass('float')}; 
}); 

Answer 2

Это похоже на хорошее решение для меня, вы пытались поместить свой код внутри функции document.ready? как это:

$(document).ready(function() { 

вар $ окно = $ (окно), $ уль = $ ('ul.nav');

$ window.resize (функция() { если ($ window.width() < 979) { возвращение $ ul.addClass ('поплавок'); } еще {

$html.removeClass('float')}; 

}) .trigger ('размер');

});

Answer 3

Добавление доллара перед:

(function() { 

эквивалентно document.ready.

Определяется ли значение $ html где-то до того, как этот код будет выполнен? В противном случае, возможно, вы намеревались это $ ul?

Возвращение в:

return $ul.addClass('float'); 

не требуется, хотя это не является ошибкой.

Есть ошибки в панели навигации браузера?

Answer 4

Похоже, вы фактически не называете свою функцию.Вы можете иметь несколько документов, готовые обработчики, так как это было предложено другими, просто добавить $ перед вашей функции, чтобы превратить его в документ, готовый обработчик:

$(function() { 
    ... 
}); 

Другие варианты, чтобы изменить его в имени функции и вызова он из существующего документа готового обработчика или выполнений его как IIFE:

(function() { 
    ... 
}());