jqueryを使ってウィンドウサイズを変更する

Question

ウィンドウサイズが960px未満の場合にのみフォントの素晴らしいアイコンを表示したい場合は、この条件を追加します（window.matchMedia（ "（max-width：960px）"））。

$(window).resize(function() { 
if (window.matchMedia("(max-width: 960px)").matches) { 
    $('li.has_children').prepend('<i class="fa fa-arrow-up"></i>'); 
    $('li.has_children').click(function (e) { 
      $(this).children('i').toggleClass("fa-arrow-up fa-arrow-down"); 
      $(this).children('ul.navi').toggle('1000'); 

      return false; 
    }); 
    } 
}).trigger("resize"); 

が、問題は、私はウィンドウのサイズを変更するとき、私は、複数のアイコンの代わりの1を持っていたということです：私はので、私はこのコードを持っているこのアイコンは、ウィンドウは960の下にサイズを変更されたときに消え、再び現れた960の上にウィンドウのサイズを変更します

Answer 1

jQuery.prepend()を使用しているため、複数のフォントですばらしいアイコンが表示されています。サイズを変更するたびに、スクリプトが実行され、もう1つアイコンが<li class="has_children">...</li>の前に追加されます。

修正するには、最初に削除して消えるようにする必要があります。コードはこの

$(window).resize(function() { 
    if (window.matchMedia("(max-width: 960px)").matches) { 
     // attempt to remove the icon before prepending it 
     $('li.has_children').children('i.fa.fa-arrow-up').remove(); 
     $('li.has_children').prepend('<i class="fa fa-arrow-up"></i>'); 
     $('li.has_children').click(function (e) { 
      $(this).children('i').toggleClass("fa-arrow-up fa-arrow-down"); 
      $(this).children('ul.navi').toggle('1000'); 

      return false; 
     }); 
    } 
}).trigger("resize"); 

JSFiddleのようになります。https://jsfiddle.net/j2o62a45/1/ `

Answer 2

はい、コードには複数のアイコンが表示されます。

$('li.has_children').prepend('<i class="fa fa-arrow-up"></i>'); 

イベントの外でこのライブを移動して、アイコンが1つだけになるようにするか、または".fa .fa-arrow-up"を'li.has_children'から削除することができます。いずれも動作します。