使用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調整窗口大小的功能

回答

相關問題