在窗口上刪除/添加類調整大小jquery

我想使用下面的代碼來刪除窗口上的類resize爲響應主題中的菜單，但它不會工作。在窗口上刪除/添加類調整大小jquery

(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」？在此先感謝您的任何提示。

編輯

試圖一點點後，我找到了名爲.css查詢

@media (max-width: 979px)

現在，它的工作的替代解決方案，但我仍然不明白爲什麼了jQuery調整大小不起作用。

來源

2013-06-04 Someone33

希望它會有所幫助。

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

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

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

來源

2013-11-13 09:49:54

它看起來像一個很好的解決方案，你是否嘗試把你的代碼放入一個document.ready函數中？像這樣：

$(document).ready(function() {

變量$窗口= $（窗口）， $ UL = $（ 'ul.nav'）;

$ window.resize（函數（）{ 如果（$ window.width（）< 979）{ 回報$ ul.addClass（ '浮動'）;} 其他{

$html.removeClass('float')};

} ）.trigger（ '調整'）;

}）;

來源

2013-06-04 23:19:12 Barrett

已經有一個'$（文件）。就緒（函數（）{'在外部.js文件的最開始，它調用大部分代碼 – Someone33

添加在前面的美元：

(function() {

相當於的document.ready。

是否在此代碼執行之前的某個位置定義了$ html？否則，也許你打算它是$ ul？

中的回報：

return $ul.addClass('float');

不是必須的，雖然這不是一個錯誤。

瀏覽器控制檯中是否有錯誤？

來源

2013-06-04 23:23:56

對不起：'$ html'應該是'$ ul'，但它不會變化太多，仍然不能工作，n o控制檯中的錯誤:-(。 – Someone33

看來你並沒有真的調用你的函數。你可以有多個文檔準備好處理程序，所以別人的建議，只需在你的函數的前面加上$把它變成一個文檔準備好處理程序：

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

其他選擇是把它變成一個名爲函數和調用從現有的文件準備好處理程序或執行它作爲一個IIFE：

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

來源

2013-12-02 23:24:38 WynandB

在窗口上刪除/添加類調整大小jquery

回答

相關問題