Question

如何实现以下目标？

// 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();

更新

没有resize事件的

This is what I have，但是当屏幕宽度小于480px时，我想删除.wrapInner和.prepend代码。

Answer 1

试试这个：

$(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/

另外，我认为你最终无法获得有效的标记。要么在li中包含非ul项，要么在a内添加ul ...但也许我没有想过通过什么你的标记看起来像。我只是在猜测。如果窗口太窄，我假设你正在折叠部分菜单结构。

<强>更新

看到您的代码后，进行了一些更改。首先，我错过了>中的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/

在window.resize函数中删除.wrapInner（）和.prepend（）

1 个答案: