0

ドロップダウンメニューをクリックするとドロップダウンメニュー（この場合はアイテム3）が表示され、次にliをクリックするとアイテム2が投稿され、次にアイテム3（aの間のテキスト）が表示されるドロップダウンメニューを作成しようとしています。 li では項目 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() {

    });
});
4

1 に答える 1

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()));
}
于 2012-06-28T03:14:25.220 に答える