jquery - 发布并替换的简单下拉菜单

Question

我正在尝试制作一个下拉菜单，当您单击下拉菜单 a（在本例中为第 3 项）时，会显示 ul，然后当您单击 li 例如第 2 项时，它会被发布，然后是第 3 项（a 之间的文本）将被第 2 项替换，反之亦然。到目前为止，我一直没有成功地做到这一点。任何帮助将不胜感激。这是我到目前为止所拥有的：

<div class="dropdown">
    <a href="#">Item 3</a>
    <ul data-id='<?php echo $row['_id'] ?>' data-url='<?php echo Uri::create('edit') ?>'>
        <li> Item 1 </li>
        <li> Item 2 </li>
        <li> Item 4 </li>
        <li> Item 5 </li>
        <li> Item 6 </li>
    </ul>
</div>



$('.dropdown a').click(function() {
    $(this).parent().children('ul').toggle();
    return false;
});


$('.dropdown li').click(function() {
    var url = $(this).parent().data('url'),
        id = $(this).parent().data('id'),
        status = $(this).text();

$.post(url, { status: status, id: id }, function() {

    });
});

Answer 1

解决方案在文本更改后对 LI 进行排序并再次滑动关闭下拉菜单

演示：http: //jsfiddle.net/Ze7ej/

/* must delegate handler due to html change during sorting*/
$('.dropdown').on('click', 'li', function() {
    var $this = $(this),
        $parent = $this.parent(),
        $link = $parent.prev(),
        url = $parent.data('url'),
        id = $parent.data('id'),
        status = $this.text();
    $this.text($link.text());
    $link.text(status);
    $parent.slideToggle(function() {
        var list = $parent.children().get();
        list.sort(sortList);
        $parent.html($(list))
    });

    /* do ajax*/
});


function sortList(a, b) {
    return $.trim($(a).text()).localeCompare($.trim($(b).text()));
}