Question

我正在尝试创建一个菜单，每次点击一个链接时，它会将父“li”换成第一个，有人可以告诉我该怎么办？

这是初始菜单：

    <ul class="top-menu">
    <li class="first-element"><a href="/">First</a><li>
    <li class="second-element"><a href="/">Second</a><li>
    <li class="third-element"><a href="/">Third</a><li>
    <li class="fourth-element"><a href="/">Fourth</a><li>
   </ul>

点击第四个链接后，这是菜单：

    <ul class="top-menu">
  <li class="fourth-element"><a href="/">Fourth</a><li>
    <li class="second-element"><a href="/">Second</a><li>
    <li class="third-element"><a href="/">Third</a><li>
    <li class="first-element"><a href="/">First</a><li>
    </ul>

Answer 1

$('.top-menu li').live('click', function() {
     $(this).remove();
    $(this).prependTo('.top-menu');
});

Answer 2

以下是FIDDLE DEMO

<ul class="top-menu">
    <li class="first-element">First</li>
    <li class="second-element">Second</li>
    <li class="third-element">Third</li>
    <li class="fourth-element">Fourth</li>
</ul>

$.fn.exchangePositionWith = function(selector) {
    var other = $(selector);
    this.after(other.clone());
    other.after(this).remove();
};

$(document.body).on('click', 'ul.top-menu li' ,function(){
    var pos = $(this).closest('li').index();
    $("ul.top-menu li:eq("+pos+")").exchangePositionWith("ul.top-menu li:eq(0)");
    return false;
});

如何在点击时将第一个列表元素与另一个li元素交换

2 个答案: