изменить размер окна с помощью jquery

Question

Я хочу, чтобы шрифт был удивительным, только когда размер окна меньше 960 пикселей, поэтому я добавляю это условие, если (window.matchMedia ("(max-width: 960px)").), А также когда я изменить размер окна более 960 эта икона должна была исчезнуть и вновь появиться, когда окно изменения размера под 960 так я этот код:

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

, но проблема в том, что, когда я изменить размер окна я имел несколько значок вместо одного

Answer 1

Вы получаете несколько значков, похожих на шрифт, потому что вы используете jQuery.prepend(). Каждый раз при изменении размера сценарий выполняется и добавляет еще один значок к <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>'); 

Вы можете перемещать это живое вне мероприятия, чтобы у вас остался только один значок, или вы можете удалить ".fa .fa-arrow-up" от 'li.has_children'. Либо работает.