Question

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

如何撤消该陈述或说明如果屏幕尺寸小于或等于1017，则将徽标放回原位？

到目前为止，这是我所拥有的，似乎不起作用：

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，然后制作2个CSS类，以控制徽标所需的位置（中心或左对齐）

.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上执行此操作将确保在页面加载和页面调整大小时，定位徽标的功能正常工作。

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

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

这个最新的代码将克隆您的徽标（因此您只需要一个它的实例）然后将其附加到您喜欢的位置并在它准备好时隐藏它。然后根据窗口大小，它将显示或隐藏正确的徽标。

Answer 2

我已更新了我对更清洁解决方案的回答：

jQuery(function($) {


    $(document).ready(function() {

      var logo = $('.at_middle');
      var pos1 = $('.menu-item-5302');
      var pos2 = $('.l-header');

      pos1.after($('.at_middle').clone());

      if ($(window).width() > 1018) {

         pos1.next('.at_middle').show();
         pos2.find('.at_middle').hide();

      }else if ($(window).width() <= 1017) {

         pos1.next('.at_middle').hide();
         pos2.find('.at_middle').show);

      }
});

更简单：

jQuery(function($) {


    $(document).ready(function() {

      var logo = $('.at_middle');
      var pos1 = $('.menu-item-5302');



         pos1.after($('.at_middle').clone());

         });

 });

CSS

.at_middle{ display:none; }

@media(max-width:1017px){
    .menu-item-5302 .at_middle{

       display:block;

     }
}

@media(min-width:1018px){
    .l-header .at_middle{

       display:block;

     }
}

Answer 3

尝试使用.insertAfter()，.clone()，css()

    function logo() {
        if ($(window).width() > 1018) {
            // set original element `display` to `none`
            $(".menu-item-5302")
            .css("display", "none")
            // clone original element
            .clone(false)
            // move clone after `.at_middle`
            .insertAfter($(".at_middle"))
            // set clone `display` to `block`
            .css("display", "block");
        }
        if ($(window).width() <= 1017) {
            // undo the code of previous if statement
            // set clone `display` to `none`
            $(".at_middle + .menu-item-5302")
            .css("display", "none");
             // set original element `display` to `block`
             $(".menu-item-5302:first")
            .css("display", "block")

        }
    }

    $(document).ready(logo); $(window).resize(logo);

撤消Jquery条件语句

3 个答案: