Question

我希望只有当窗口大小低于960px时才有字体真棒图标所以我添加这个条件if（window.matchMedia（“（max-width：960px）”）。匹配）以及当我调整窗口大小时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/`

Answer 2

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

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

您可以在活动之外移动此活动，这样您最终只能使用一个图标，或者可以从".fa .fa-arrow-up"移除'li.has_children'。要么有效。

使用jquery调整窗口函数

2 个答案: