jquery - 撤消 Jquery 条件语句

Question

我有一个响应式设计的条件语句，如果屏幕尺寸大于 1018 像素，则在菜单中间放置一个 Logo 。

如果屏幕尺寸小于或等于 1017，我该如何撤消该声明或说将 Logo 放回其原始位置？

这是我目前所拥有的，但似乎不起作用:

jQuery(function($) {
    $(document).ready(function() {
        if ($(window).width() > 1018) {
            $('.menu-item-5302').after($('.at_middle'));
        }
      if ($(window).width() <= 1017) {
        //this doesnt work
        $( ".at_middle" ).detach();
        $( ".at_middle" ).append("l-header");
        }
    });
});

这是更新后的代码!

`at_middle` is a logo 
`menu-item-5302` is a `<li>` tag 
`l-header` is a header

Answer 1

您可以只使用 .remove() 此外，可以清除条件 - 如果它大于 1018，则执行某些操作，否则执行其他操作。

$(document).ready(function() {
    if ($(window).width() > 1018) {
        $('.menu-item-5302').after($('.at_middle'));
    } else {
        $('.at_middle').remove();
    }
});

已更新

这是我上面评论的一个例子。要正确执行此操作，请为 Logo 提供一个通用类名，例如 .logo，然后制作 2 个 CSS 类来控制 Logo 需要放置的位置(居中或左对齐)

.logo {
    position:relative;
    width:200px;
    height:50px;
}
.logo.left {
    /* Position your logo with CSS Here, below is an example */
    float:left;
}
.logo.center {
    /* Position your logo with CSS Here, below is an example */
    left:50%;
    margin-left:-100px; /*this is how to center with relative */
}

然后使用 jQuery，您只需添加和删除类:

function moveLogo() {
    var windowW = $(window).width();
    if(windowW > 1018){
        $('.logo').removeClass('left');
        $('.logo').addClass('center');
    } else {
        $('.logo').removeClass('center');
        $('.logo').addClass('left');
    }
}
$(document).ready(function(){
    moveLogo();
});
$(window).resize(function(){
    moveLogo();
});

在 Doc.ready 和 window.resize 上执行此操作将确保在页面加载和调整页面大小时定位 Logo 的功能正常工作。

另一个更新 因此，由于您需要在不同的位置显示不同的 Logo ，请尝试以下操作:

function moveLogo() {
    var winW = $(window).width();
    if(winW > 1018) {
        logo.hide();
        logoClone.show();
    } else {
        logo.show();
        logoClone.hide();
    }
}

$(document).ready(function(){
    var logo = $('.logo');
    var logoClone = logo.clone();
    $('.menu-item-5302').after(logoClone);
    logoClone.hide();
    moveLogo();
});
$(window).resize(function(){
    moveLogo();
});

此最新代码将克隆您的 Logo (因此您只需要一个实例开始)，然后将其附加到您想要的位置并在准备就绪时将其隐藏。然后根据窗口大小，它会显示或隐藏正确的 Logo 。