JQuery Window.Resize切換CSS響應

爲了製作HTML 4網站，我幾乎完成了一項改裝作業。響應。我不想使用設備測試方法來加載內容/ CSS/JQuery - 相反，我試圖忠於響應式創意：一個響應不同窗口大小的網站。JQuery Window.Resize切換CSS響應

我想實現：

在窗口大小798px或更大，該網站的子菜單顯示爲它總是有，沒有問題。
在窗口大小797px或更少，子菜單中的CSS是取代與該jquery.flexnav.js插件。

在這兩種情況下，CSS都是不同的，並且由於歷史原因它們需要保持不同。

切換樣式沒有問題，因爲插件處理這個。但是，當窗口從797px調整到810+時，例如 - 元素仍然綁定到flexnav.js。

在798px或更大，在UL/LI元素所需要的所有連接flexnav.js的被清除，並在797px以下，flexnav.js踢

問題：

我似乎無法得到flexnav.js清除，所以子菜單仍然可以在798px或更大的窗口中摺疊。如果我將窗口大小調整爲798px以下，然後將大小調整回798px或更大，flexnav.js仍然會影響，順便說一句，我理解這是爲什麼。

我已經試過：

爲了讓這個在窗口調整大小樣式/行爲的變化，而不是需要重新加載。

我適應這個與我的ID和類名工作：http://jsfiddle.net/userdude/rzdGJ/1/

(function($) { 
    var $window = $(window), 
     $ul = $('ul#myone'); 

    $window.resize(function resize() { 
     if ($window.width() < 514) { 
      //return $html.addClass('mobile'); 
      return $("ul#myone").addClass("flexnav"); 
     } 

     //$html.removeClass('mobile'); 
     $("ul").removeClass("flexnav") 
    }).trigger('resize'); 
})(jQuery);

我的樣本代碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Untitled Document</title> 
<link href="http://urly.be/flexnav.css" rel="stylesheet" type="text/css" media="all and (max-width: 798px)"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
</head> 
<body> 




<ul id="myone" class="flexnav"> 
    <li>1 
    <ul> 
     <li>1a 
      <ul> 
       <li>1b</li> 
      </ul> 
     </li> 
    </ul> 
    </li> 
</ul> 

<script type="text/javascript"> 
    if ($(window).width() <= 798) {  

     document.write('<scr'+'ipt src="http://urly.be/js/jquery.flexnav.js" type="text/javascript"></sc'+'ript>'); 
     document.write('<scr'+'ipt type="text/javascript">jQuery(document).ready(function($){$(".flexnav").flexNav();});</sc'+'ript>'); 
    } 



    </script> 
<!-- COMMENTED OUT - ORIGINAL PLUGIN JQUERY <script src="http://www.agilenation.co.uk/custom/temp/flexnav-master/js/jquery.flexnav.js" type="text/javascript"></script> 
    <script type="text/javascript"> 
     jQuery(document).ready(function($) { 

      $(".flexnav").flexNav(); 

     }); 
    </script>--> 

</body> 
</html>

來源

2013-10-31 Dylan

切換爲flexnav類不會幫助它已被初始化之後。它添加了很多內聯樣式，併爲下拉列表綁定事件等。清除flexnav的唯一合理方法是從DOM中刪除菜單元素，並在resize事件上追加一個新元素。

你試過：

父UL
設置數據斷點=「798」適應老菜單樣式只使用.lg-screen選擇
初始化flexnav覆蓋flexnav風格一旦準備就緒

另一種選擇可能是有兩個菜單實例，一個帶有flexnav綁定，一個沒有，只是切換菜單顯示財產上的調整大小，或與媒體查詢：

.old-menu{ 
    display:none; 
} 

@media screen and (min-width:798px){ 
    .old-menu{ 
     display:inherit; 
    } 
    .flexnav{ 
     display:none; 
    } 
}

來源

2013-10-31 14:01:10 Ben

** POINT 1：**沒有與適應於數據斷點的CSS沒有問題 - 的主要問題與綁定的事件，就像你說的，導致在舊的菜單中，798+就像手風琴一樣。所以我希望我能夠刪除類，就像上面的JSFiddle一樣，它自己就可以工作。 **要點2：**我會研究.lg選擇器。 **要點3：**我會研究這一點。我有完整的FTP訪問源和PHP，所以兩個菜單可能是前進的方向。但是，flexnav仍然會負責。「從DOM中移除元素」...我會再看看這個 - 但removeClass看起來是理想的方式嗎？ – Dylan

刪除類只會影響樣式而不是任何綁定的事件。只要舊的菜單出現並且在Flexnav啓動並且該類被刪除後正常運行，就可以繼續。 – Ben

我明白了！因此，有兩個菜單版本，class =「old-menu」，class =「flexnav」 - 我希望我可以避免篡改PHP，但似乎是唯一可行的方法（至少作爲臨時措施）。 – Dylan

JQuery Window.Resize切換CSS響應

回答

相關問題