在html中制作可移动的项目，菜单项顺利滑动

Question

这是以下问题的扩展 making movable menu items in html

这里我使用的是导航菜单

<ul id="menu">
<li><a href="/home">Home</a></li>
<li><a href="/services">Services</a></li>
<li><a href="/contact">Contact</a></li>
<li><a href="/about">About</a></li>
</ul>

这里的问题是它在页面刷新后没有为静态页面检索它正常工作。菜单项必须顺畅滑动

有任何帮助，谢谢？

Answer 1

使用jQuery cookie存储li的订单。

请参阅示例： Fiddle

$(function () {
    if ($.cookie('menuOrder') != null) {
        var menuOrder = $.cookie('menuOrder').split(',');
        var li = $('#menu li');
        li.detach().sort(function (a, b) {
            return (menuOrder.indexOf($(a).text()) > menuOrder.indexOf($(b).text()));
        });
        $('#menu').append(li);
    }
    $('#menu ').on('click', 'li', function (event) {
        $(event.target).prependTo('#menu ');
        $.cookie('menuOrder', $('#menu li ').map(function () {
            return $(this).text();
        })
            .get()
            .join());
    });

});