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() {
  ...
});

他のオプションは、それを名前付き関数に変更し、既存のドキュメント対応ハンドラーから呼び出すか、IIFEとして実行することです。

(function() {
  ...
}());
于 2013-12-02T23:24:38.760 に答える