仅追加元素一次

Question

我有一个带有导航栏的响应式电子商务模板，当 window 的大小调整到某个断点以下时，它会垂直堆叠。

有子项的菜单项附加 "expander"。单击时，会展开相应的子菜单。

函数：

    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() 也调用了 window resize，这导致了不便，当window 的大小从小（低于断点）调整为 smaller（甚至 more 低于断点），<i class="expander fa fa-angle-down"> 重复附加。所以我们得到了很多扩展器，而不是一个。

应该如何修改函数 e 来避免这种情况？

谢谢！

Answer 1

我会添加一个变量来跟踪它的状态，比如 expanderstate，然后将它设置为 0,1 (false/true) 如果它是否展开，并检查状态是否不等于展开在允许您的扩展代码运行.

之前

Answer 2

基本上不建议在 window 调整大小事件的回调中进行 dom 操作。它会消耗性能。但是，如果你想做同样的事情，那么我建议你使用下面的代码。

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.

仅追加元素一次

Append element only once

jquery

append

responsive-design

drop-down-menu