リサイズ時に異なる機能を発動する

Question

私はこれをグーグルで試してみましたが、私はどのキーワードを使用するべきなのかよくわからないので空になります。いずれにしても、私の機能や発射方法が比較的単純なものを見逃しているような気がします。

私の希望する機能は次のとおりです。「.menu-item-has-children a i」という構造のナビゲーションの隣に小さな矢印があります。モバイル（880px未満）では、その<i>要素をクリックして、下に<ul>を切り替える必要があります。デスクトップでは、私はしません。これは、2つのビューポートサイズ（880未満と880以上）を切り替えるまでうまく動作します。その後、ページをリロードするまで、目的の機能は起動しません。あなたができる、

jQuery(document.ready(function($) { 
    function mobileNav() { 
     var w = $(window).width(); 

     if (w < 879) { 
      $('.menu-item-has-children a i').click(function(e) { 
       e.preventDefault(); 
       $(this).parents('menu-item-has-children').children('ul').toggle(); 
       $(this).toggleClass('turned'); 
      }); 
     } 
    } 

    mobileNav(); 

    jQuery(window).resize(function($) { 
     mobileNav(); 
    }); 
}); 

Answer 1

イム正確にわからないが、私は$(this).parents('menu-item-has-children').children('ul').toggle();

FWIWに沿ってmenu-item-has-childrenの前には.がないので、それは働いていなかった理由があると思う：私のjQueryのは、このようになりますスクリーンのサイズ変更時に実際には動作しないので、domReadyの必要性をなくし、サイズ変更機能を排除するクリックハンドラのデリゲート構文を使用します。 .menu-item-has-children a iノードがクリックされたときに起こることだけが気になります。そこで、クリックごとに画面サイズを確認することができます。

jQuery(document).on('click', '.menu-item-has-children a i', function(e) { 
     var $ = jQuery; 
     var $this = $(this); 
     e.preventDefault(); 
     if (879 < $(window).width()) { 
      $this.parents('.menu-item-has-children').children('ul').toggle(); 
      $this.toggleClass('turned'); 
     } 
    });