Question

我实际上在响应式网站上工作。我想知道，当我们使用JS的智能手机设备时，是否可以重新订购菜单链接？例如，第3项成为第1项。我不想为此制作其他导航块。

示例：

第1项（第1.1项 - 第1.2项 - 第1.3项）
第2项（第2.1项 - 第2.2项 - 第2.3项）
第3项
第4项
第5项

脚本：

function ReoderMenu() {
    var size = $(window).width();

    if (size < 479) {
    //Reoder it (item 3 -> Item 1)
    }
    else if (size >=1024) {
    //tablette device
    }
    else {
    //do something
    }
}

提前谢谢。

Answer 1

我找到了令人毛骨悚然的解决方案：

HTML：

        <ul id="list">
             <li><a>Item 1</a></li>
             <li><a>Item 2</a></li>
             <li id="Item3"><a>Item 3</a></li>    
             <li><a>Item 4</a></li>
             <li><a>Item 5</a></li>
        </ul>

JS：

  $("#list li a").click(function() {        
       var before = "<nav id='#new'><ul><li><a>";
       var after  = "</a></li><li><a>Item1</a></li><li><a>Item2</a></li><li><a>Item4</a></li><li><a>Item5</a></li></ul></nav>";
       $("#list li").parent().before(before+"Item3"+after);
       $("#list").css("display","none");
     });

我希望有人有更好的解决方案吗？

编辑：我找到了更好的解决方案：$（'＃Item1'）。parent（）。prepend（$（'＃Item3'））;

我几乎不推荐这个话题：Move list item to top of unordered list using jQuery

在Js上重新排序菜单链接

1 个答案: