javascript - 在html中,制作可以移动菜单项

  显示原文与译文双语对照的内容

在html中制作可以移动菜单项,我有四个菜单项垂直排列在我的站点右上角。


Home
Services
Contact 
About

现在我需要点击第二个 element(services),第二个元素到达顶部,第一个 element(home) 必须按下第三个元素。 任何帮助和参考链接谢谢?

时间: 作者:

你可以在单击这些选项时将这些选项直接跳转到顶部:


$(function() {
 $('#menu').on('click', 'li', function(event) {
 $(event.target).prependTo('#menu');
 });
});

ul {
 padding: 0;
}
li {
 display: block;
 list-style-type: none;
 height: 30px;
 line-height: 30px;
 color: darkblue;
 font-family: sans-serif;
 background-color: #ddd;
 padding-left: 10px;
 margin: 5px 10px;
 cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="menu">
 <li>Home</li>
 <li>Services</li>
 <li>Contact</li>
 <li>About</li>
</ul>

jsFiddle链接

...