用jquery调整窗口大小答案

【问题标题】：resize window function with jquery用jquery调整窗口大小
【发布时间】：2016-09-23 21:59:51
【问题描述】：

我只想在窗口大小低于 960 像素时使用字体真棒图标，所以我添加了这个条件 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");

但问题是，当我调整窗口大小时，我有多个图标而不是一个

【问题讨论】：

为什么不使用 css @media 来做到这一点
我首先用这个 a:after { color: black; 使用媒体查询。内容：“\f107”；字体家族：FontAwesome；但问题是，当我想更改点击图标时，我无法在 jquery 内容后获取 css

标签： javascript jquery

【解决方案1】：

是的，您最终会得到多个图标，因为您的代码将它们放在那里：

$('li.has_children').prepend('<i class="fa fa-arrow-up"></i>');

您可以将它移到活动之外，这样最终只剩下一个图标，或者您可以从'li.has_children' 中删除".fa .fa-arrow-up"。两者都可以。

【讨论】：

如果我将这个活动移到活动之外，调整大小将不起作用。如果我把窗口变小，图标就不会出现，切换效果也不起作用。

【解决方案2】：

因为您使用了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/`

【讨论】：

我测试了你的代码，但每次我调整大小时都会得到多个字体很棒的图标
@michellompret 对不起，我误解了jQuery.remove()。答案已更新，现在应该可以使用了。