Question

我正在尝试在调整大小和加载时检查屏幕的宽度。如果我的窗口宽度小于800px，我想先制作我的最后一个项目。

如果窗口是800或更高，我想确保最后一个li保持最后。

.content-search-click位于li中的一个锚点上，我正在四处移动。我非常希望它首先出现在较小的屏幕上，最后放在更大的屏幕上。

以下是我正在使用的内容......

function msearch() {



$(window).on("resize", function () {

var mtargetmenu = $('#menu ul');
var mtargetfirst = $('#menu li:first');
var mtargetlast = $('#menu li:last');
var mtarget = $('.content-search-click'); 

            var mwin =  $(window).width();
            if (mwin < 800) {
       mtargetmenu.prepend(mtargetlast); //i want this to only occur once if it didnt do so already...
            } else {
             mtargetfirst.appendTo(mtargetmenu); //i want this to only occur once if it didn't so do already...
            }       
}).resize();
}
msearch();

感谢任何建议

更新 - 因为我的代码可能会让人感到困惑......我想做这样的事情......

function msearch() {


var mtargetmenu = $('#menu ul');
var mtargetfirst = $('#menu li:first');
var mtargetlast = $('#menu li:last');
var mtarget = $('.content-search-click'); 


$(window).one( "resize", function() {
        var mwin =  $(window).width();
            if (mwin < 800) {
            console.log('window is smaller than 800');
       mtargetmenu.prepend(mtargetlast);
            } else {
            console.log('window is larger than 800');
             mtargetfirst.find(mtarget).appendTo(mtargetmenu);
            }
    }).resize();

}


msearch();

这有助于了解我的目的吗？完成动作一次，但总是检查用户拖动的位置....

Answer 1

所以，如果我理解正确你只想移动最后一项。浏览器超过800时保持最后状态，或者如果浏览器较小则保持最后状态。

如果是的话

var lastValue  = 800; // as breakpoint
var mtargetmenu = $('#menu ul');
var mtargetlast = mtargetmenu.children().last();

$(window).on("resize", function () {
    var mwin = $(window).width();

    // check if we fell below 800 from a bigger screen
    if (lastValue > mwin && mwin < 800){
        mtargetmenu.prepend(mtargetlast );
    }
    // check if we went over or equal to 800 from a smaller screen
    if (lastValue < mwin && mwin >= 800){
        mtargetmenu.append(mtargetlast );
    }

    lastValue = mwin;
}).resize();

http://jsfiddle.net/xvk0fbgn/1

演示

如果您使用ajax重新加载数据，则需要重新分配mtargetlast变量。

如何在调整大小时重新排序列表项，如果满足条件，则只调整一次

1 个答案: