0

我实际上正在开发一个响应式网站。我想知道是否可以仅当我们在使用 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
    }
}

提前谢谢。

4

1 回答 1

0

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

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

于 2013-09-11T14:59:05.273 回答