製作HTML元素的寬度

我想添加一個按鈕移動菜單時，文檔寬度小於470製作HTML元素的寬度

它做它在頁面加載時開始，但是當我惹我的瀏覽器上實際文檔的寬度不會隨文檔而改變。我如何實現這一目標？

當寬度小於470時會出現按鈕，當頁面寬度大於470時，按鈕應該會出現，基本上是470。

這是我的代碼。

 var width = $(document).width(); 
     if (width < 470) { 
      $("<button id='menu'>Menu</button>").insertAfter("#navigation a img"); 
     } else { 
      $("<button id='menu'></button>").hide(); 
     }

來源

2012-09-28 wowzuzz

每次窗口大小變化時檢查文檔的寬度。

function onresize(){ 
    var width = $(document).width(); 
    if (width < 470) { 
     if($("#menu").length){ 
       $("#menu").show(); 
     } 
     else{ 
       $("<button id='menu'>Menu</button>").insertAfter("#navigation a img"); 
     } 
    } else { 
     $("#menu").hide(); 
    } 
} 

onresize()//first call 
$(window).resize(onresize);

來源

2012-09-28 21:57:19 Anoop

如果我調整瀏覽器窗口的大小，它會每次重複調整大小時一直創建相同的按鈕元素。這兩個答案都適用 – wowzuzz

我做了改變以防止按鈕的重新創建。 – Anoop

@Shusl'$（'＃menu'）。length！== 0'是一個冗餘檢查。在這裏，你只需要說'if（$（'＃menu'）。length）' – Ohgodwhy

綁定的功能/檢查窗口上的方法resize：

$(window).resize(
    function(){ 
     /* do stuff in here */ 
    });

Simple proof-of-concept。

來源

2012-09-28 21:57:05

如果我調整瀏覽器窗口的大小，每次重新調整大小時都會一直創建相同的按鈕元素。 – wowzuzz

嗯，是的;因爲這就是你的邏輯告訴它要做的事情。在重新創建它之前，只需檢查$（'button＃menu'）'元素是否已經存在。 –

製作HTML元素的寬度

回答

相關問題