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');
});

.flo没有定义.flo。如果子菜单（在管理区域中动态生成）变得太大而无法容纳在容器中，它就在那里。

这是当子菜单为大

时生成“浮动效果”的代码

   $('.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调整大小不起作用。

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 () {

var $ window = $（窗口）， $ ul = $（'ul.nav'）;

$ window.resize（函数（）{ if（$ window.width（）＆lt; 979）{ return $ ul.addClass（'float'）; }否则{

$html.removeClass('float')};

}）触发（ '调整'）;

}）;

Answer 3

在前面添加美元：

(function() {

相当于document.ready。

在执行此代码之前是否在某处定义了$ html？否则，也许你打算将它作为$ ul？

返回：

return $ul.addClass('float');

不是必需的，虽然这不是错误。

浏览器的控制台是否有错误？

Answer 4

看来你实际上并没有调用你的功能。您可以拥有多个文档就绪处理程序，因此按照其他人的建议，只需在函数前添加$即可将其转换为文档就绪处理程序：

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

其他选项是将其更改为命名函数并从现有文档就绪处理程序调用它或将其作为IIFE执行：

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

在窗口调整大小jquery上删除/添加类

4 个答案: