Добавить элемент только один раз

Question

У меня есть отзывчивый шаблон для электронной коммерции с панелью навигации, которая при изменении размера окна ниже определенной точки разрыва складывается вертикально.

В меню, в котором есть дети, добавлен «расширитель». При щелчке это расширяет соответствующее подменю.

Функция:

function breakPointHendle(){ 
     elm.find('li').each(function() { 
     if($(window).width() <= defaults.breakPoint) { 
      if ($(this).find('ul').length > 0) { 
      $(this).addClass("parent"); 
      $(this).append('<i class="expander fa fa-angle-down"></i>'); 
      } 
     } else { 
      $(this).removeClass("parent"); 
      $(this).removeClass("active"); 
      $(this).find('.expander').remove(); 
      $(this).find('ul').removeAttr("style"); 
      $(hamburger).removeClass("active"); 
     } 
     }); 

     $("i.expander").click(function() { 
     if (!$(this).parent('li').hasClass("active")) { 
      $(this).parent('li').children('ul').slideDown(defaults.slideDownTime); 
      $(this).parent('li').addClass("active"); 
     } else { 
      $(this).parent('li').children('ul').slideUp(defaults.slideUpTime); 
      $(this).parent('li').removeClass("active"); 
     } 
     }); 
    }; 

    breakPointHendle(); 
    $(window).resize(breakPointHendle); 

Тот факт, что breakPointHendle() является также называется в окне изменения размера приводит неудобство, что при изменении размеров окна от мала (ниже точки разрыва) до меньше (даже больше ниже точки останова), <i class="expander fa fa-angle-down"> является добавлено повторно. Таким образом, мы получаем множество расширителей вместо одного.

Как следует изменить функцию e, чтобы избежать этого?

Спасибо!

Answer 1

В основном не рекомендуется делать манипуляции с домино внутри события обратного вызова окна. Это приведет к снижению производительности. Но все же, если вы хотите сделать то же самое, я бы посоветовал вам использовать следующий код.

function breakPointHendle(){ 
     elm.find('li').each(function() { 
     $(this).removeClass("parent"); //---moved the line here 
     $(this).find('.expander').remove(); //---moved the line here 
     if($(window).width() <= defaults.breakPoint) { 
      if ($(this).find('ul').length > 0) { 
      $(this).addClass("parent"); 
      $(this).append('<i class="expander fa fa-angle-down"></i>'); 
      } 
     } else { 
      $(this).removeClass("active"); 
      $(this).find('ul').removeAttr("style"); 
      $(hamburger).removeClass("active"); 
     } 
     }); 
    ....rest of the function definition. 

Answer 2

Я бы добавил переменную, чтобы отслеживать ее состояние, что-то вроде expanderstate, а затем установите его на 0,1 (false/true), если его расширили или нет, и проверьте, чтобы состояние не было равно расширенному, прежде чем разрешить код расширения для запуска.