在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（）

回答

相关问题