Question

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

带有子项的菜单项附加了＆＃34;扩展器＆＃34;。单击时，将展开相应的子菜单。

功能：

    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"> 重复附加。所以我们得到了很多扩展器，而不仅仅是一个。

如何修改函数以避免这种情况？

谢谢！

Answer 1

基本上不建议在窗口调整大小事件的回调中进行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.

Answer 2

我会添加一个变量来跟踪它的状态，比如expandderstate，然后将其设置为0,1（false / true），如果它是否展开，并检查状态是否等于扩展状态在允许扩展代码运行之前。

仅添加一次元素

2 个答案: