在window.resize函數中去除.wrapInner（）和.prepend（）

如何實現以下功能？在window.resize函數中去除.wrapInner（）和.prepend（）

// Resize triggers 
$(window).resize(function() { 
    if (window.innerWidth <= 480) { 
     $('#menu-primary-navigation').wrapInner('<li id="menu" class="dd"><ul class="sub-menu"></ul></li>'); 
     $('#menu').prepend('<a href="#">Menu</a>'); 
    } 
    if (window.innerWidth >= 480) { 
     // Remove the above .wrapInner & .prepend() 
    } 
}) .resize();

UPDATE：

This is what I have不調整大小事件，但我想刪除.wrapInner和.prepend代碼當屏幕小於480像素寬。

來源

2012-03-19 Mr Jonny Wood

你如何達到目標？ – 2012-03-19 23:29:18

試試這個：

$(function() { 
    $(window).resize(function() { 
     if (window.innerWidth <= 480 && !$('#menu').length) { 
      $('#menu-primary-navigation').wrapInner('<li id="menu" class="dd"><ul class="sub-menu"></ul></li>'); 
      $('#menu').prepend('<a id="premenu" href="#">Menu</a>'); 
     } else if (window.innerWidth > 480 && $('#menu').length) { 
      $('#menu').replaceWith($('#menu > ul').children()); 
      $('#premenu').remove(); 
     } 
    }).resize(); 

});

注意我加&& !$('#menu').length。這只是添加菜單，如果它不存在。您也可以將第二個if作爲else，因爲它們是互斥的。（當你改變>= 480到> 480）

演示代碼：http://jsfiddle.net/jtbowden/WzweR/

演示（全屏）：http://jsfiddle.net/jtbowden/WzweR/embedded/result/

另外，我不認爲你可以有效的標記結束。要麼你在ul中包裝非li項，要麼在ul中加入a ......但是也許我沒有想過你的標記是什麼樣的。我只是猜測。如果窗口太窄，我認爲你正在崩潰菜單結構的一部分。

更新：

看到你的代碼，一對夫婦的變化之後。首先，我錯過了我的replaceWith($('#menu > ul').children());中的>。這有很大的不同，因爲你不想把所有的ul都取消。其次，要添加一些東西到你的鏈接，你需要在調整大小調用來完成：

$(window).resize(function() { 
    if (window.innerWidth <= 480 && !$('#menu').length) { 
     $('#menu-primary-navigation').wrapInner('<li id="menu" class="dd"><ul class="sub-menu"></ul></li>'); 
     $('#menu').prepend('<a id="premenu" href="#">Menu</a>'); 
     $('#premenu').prepend("<span class='arrow-down'></span>"); // Dropdown Arrows 
     $('#premenu').next().addClass('navhidden'); // Optional 
    } else if (window.innerWidth > 480 && $('#menu').length) { 
     console.log("test"); 
     $('#menu').replaceWith($('#menu > ul').children()); 
     $('#premenu').remove(); 
    } 
}).resize();

您還需要將您的.click()處理器更改爲.on()通話，因爲正在動態創建的元素。當他們被刪除時，任何點擊處理程序被刪除。如果您使用.on()你基本處理程序附加到DOM樹和過濾元件上更高的元素，你想回應：

$('#access').on('click', 'li.dd a', function() { 
    // ... do stuff here 
    // This basically says, whenever something in #access is clicked, 
    // check if it is a `li.dd a` link, and if so, do this stuff 
});

演示代碼：http://jsfiddle.net/jtbowden/9fHPA/7/

演示（全屏）：http://jsfiddle.net/jtbowden/9fHPA/7/embedded/result/

來源

2012-03-19 23:42:27

下面是我目前的 - 這是調整大小事件之前：http://jsfiddle.net/jwoodcreative/9fHPA/ – 2012-03-20 00:13:19

啊，我很接近。查看修改。 – 2012-03-20 00:47:57

感謝您的詳細解釋。我會測試這個，並讓你知道它是否工作。雖然jsfiddle看起來不錯！ – 2012-03-20 08:24:09

在window.resize函數中去除.wrapInner（）和.prepend（）

回答

相關問題