使用jquery调整窗口大小的功能

我只想在窗口大小低于960像素的情况下使用字体真棒图标，所以如果（window.matchMedia（“（max-width：960px）”）。）匹配，我调整了960这个图标不得不消失，重新出现在窗口960下调整窗口的大小，所以我有这样的代码：使用jquery调整窗口大小的功能

$(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");

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

来源

2016-05-26 michel lompret

为什么不使用CSS @media做到这一点 – pathfinder

我第一次使用媒体查询与此一：后{ 颜色：黑色; 内容：“\ f107”; font-family：FontAwesome; }但问题是，当我想要更改图标上单击我无法获得css内容后与jquery –

由于您使用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/`

来源

2016-05-26 04:46:00 user6384194

我测试了你的代码，但是每当我调整大小时我都会得到多个字体超棒的图标 –

@michellompret对不起，我误解了'jQuery.remove（）'。答案已更新，现在应该可以使用。 – user6384194

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

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

您可以将此活动移出活动，以便最终只有一个图标，或者您可以从'li.has_children'中删除".fa .fa-arrow-up"。要么工作。

来源

2016-05-26 04:36:02

如果我移动此活动以外的事件调整大小将无法正常工作。如果我把窗口变小，图标不会出现，切换效果将不起作用。 –

使用jquery调整窗口大小的功能

回答

相关问题