简单的下拉菜单，该帖子和替换

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()));
}