4

我遇到了一些 jquery 问题，想知道您是否可以提供帮助。

我有一个带有下拉菜单的菜单，并且想根据它是哪个列表项以及下拉菜单的宽度来更改下拉菜单的位置，这就是我到目前为止所拥有的...

$(document).ready(function() {
var subnavWidth = $('.sub-nav-wrapper').width();

if(subnavWidth > 900) {
    $('.sub-nav-wrapper').addClass('two-column-offers');
} else if (subnavWidth > 800) {
    $('.sub-nav-wrapper').addClass('one-column-offers');
} else if(subnavWidth > 600) {
    $('.sub-nav-wrapper').addClass('offers');
} else if(subnavWidth > 500) {
    $('.sub-nav-wrapper').addClass('two-column');
} else if(subnavWidth > 300) {
    $('.sub-nav-wrapper').addClass('one-column');

}
});

但仅考虑菜单中的第一个列表项并将相关类应用于每个子导航。我希望它检查每个子导航的宽度，而不仅仅是第一个，然后将该类应用于该特定的子导航。

我希望这是有道理的。

4

3 回答 3

6 
$(function() {
    $('.sub-nav-wrapper').each(function(i,elem) {
        var width = $(this).width();
        if(width > 900) {
            $(elem).addClass('two-column-offers');
        } else if (width > 800) {
            $(elem).addClass('one-column-offers');
        } else if(width > 600) {
            $(elem).addClass('offers');
        } else if(width > 500) {
            $(elem).addClass('two-column');
        } else if(width > 300) {
            $(elem).addClass('one-column');
        }
    });
});​
于 2012-09-28T15:51:24.863 回答
0

您需要将此应用于所有菜单项，因此您想使用 each() 来选择它们；

$('.sub-nav-wrapper').each();

然后，您可以使用异常函数为“每个”编写代码。

$('.sub-nav-wrapper').each(function() {
    // YOUR CODE HERE                                       
}); // End each

使用$(this)关键字对“每个”项目进行检查。

 $('.sub-nav-wrapper').each(function() {
    alert($(this).width()); // for example                                      
 }); // End each
于 2012-09-28T15:49:19.933 回答
0 
   $(document).ready(function() {
   $('.sub-nav-wrapper').each(function() {
       var subnavWidth = $(this).width();
   if(subnavWidth > 900) {
      $(this).addClass('two-column-offers');
   } else if (subnavWidth > 800) {
       $(this).addClass('one-column-offers');
   } else if(subnavWidth > 600) {
     $(this).addClass('offers');
   } else if(subnavWidth > 500) {
      $(this).addClass('two-column');
   } else if(subnavWidth > 300) {
      $(this).addClass('one-column');
   }
 });
 });
于 2012-09-28T16:01:23.413 回答