1

我正在尝试使用以下代码为响应式主题中的菜单删除窗口调整大小的类，但它不起作用。

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

4

4 回答 4

4

希望它会有所帮助。

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

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

    $ul.removeClass('float')};
 });
于 2013-11-13T09:49:54.347 回答
0

在前面加上美元：

(function() {

相当于document.ready。

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

回报：

return $ul.addClass('float');

不是必需的，尽管这不是错误。

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

于 2013-06-04T23:23:56.450 回答
0

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

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

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

(function() {
  ...
}());
于 2013-12-02T23:24:38.760 回答
0

这对我来说似乎是一个很好的解决方案，您是否尝试将代码放入 document.ready 函数中？像这样：

$(document).ready(function () {

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

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

$html.removeClass('float')};

}).trigger('调整大小');

});

于 2013-06-04T23:19:12.887 回答