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

その後、anomonus 関数を使用して「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 に答える