Question

我正在尝试制作一个下拉菜单，当您单击下拉列表（在本例中为第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进行排序，然后再次关闭下拉列表

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

发布和替换的简单DropDown

1 个答案: