javascript - 使用jquery调整窗口大小的函数

Question

仅当窗口大小低于 960px 时，我才想拥有很棒的字体图标，因此我添加此条件 if (window.matchMedia("(max-width: 960px)").matches) 以及当我调整窗口大小时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/ `