javascript - 如何在单击时将 li 元素添加到另一个容器，而 li 的其余部分保持固定

Question

我有一个小问题:

我有这个列表:

<ul id="nextlevel">
<li class="listadetalii"><a style="width:100%;color:red;font-weight:600;cursor:pointer" rel="03.Accessories" data-folder="01.Hi tech (028_003)" data-titlu="Hi tech" id="01.Cosuri si cuiere" class="red-gros singlelink folder">Hi tech<p style="width:100%;color:#828282;font-size:70%" class="muted">Luni, 18 Mar 2013 16:07:14</p></a>

    <ul class="detalii-produs hide">
        <li class="togo">Image 1</li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="#" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Fișă produs</a>

        </li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="#" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Listă prețuri</a>

        </li>
    </ul>
</li>
<li class="listadetalii"><a style="width:100%;color:red;font-weight:600;cursor:pointer" rel="03.Accessories" data-folder="02.Net (028_002)" data-titlu="Net" id="01.Cosuri si cuiere" class="red-gros singlelink folder">Net<p style="width:100%;color:#828282;font-size:70%" class="muted">Marti, 16 Apr 2013 09:53:43</p></a>

    <ul class="detalii-produs hide">
        <li class="togo">Image 2</li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Fișă produs</a>

        </li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Listă prețuri</a>

        </li>
    </ul>
</li>
<li class="listadetalii "><a style="width: 100%; color: red; font-weight: 600; cursor: pointer; outline: medium none;" rel="03.Accessories" data-folder="03.)" data-titlu="Cuiere" id="01.Cosuri si cuiere" class="red-gros singlelink folder">Cuiere<p style="width:100%;color:#828282;font-size:70%" class="muted">Luni, 18 Mar 2013 10:53:47</p></a>

    <ul class="detalii-produs hide" style="display: none;">
        <li class="togo">Image 3</li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Fișă produs</a>

        </li>
        <li class="detalii-produs-lista dropdown-submenu"><a href="" style="float:right;margin-right:15px;width:100%;font-size:12px;" class="pull-right">Listă prețuri</a>

        </li>
    </ul>
</li>

此列表已折叠。当我点击“高科技”时，下一个列表将展开并且内容可见。我希望 li 元素类 togo 的内容放在 div alfa 上并隐藏 li，其余的 li-s 保留在此列表中。

其余元素 Net、Cuiere 的行为相同...

<div id="alfa">here must be Image (n)</div>

fiddle 上的更多详细代码 http://jsfiddle.net/gxg1974/Jy3EK/

感谢大家的提示和指导。

Answer 1

据我了解，您希望 togo 的内容位于 div#alfa 中。所以这是如何做到的..

$('ul#nextlevel a.singlelink').on("click", function () {
    $(this).css('outline', 'none');
    if ($(this).parent().hasClass('current')) {
        
        $(this).siblings('ul').slideUp('slow', function () {
            $(this).parent().removeClass('current');
        });
    } else {
        var img = $(this).siblings('ul').children("li.togo").hide()
        .html();
        console.log(img);
        
        $("#alfa").html(img);
        $('ul#nextlevel li.current ul').slideUp('slow', function () {
            $(this).parent().removeClass('current');
        });
        $(this).siblings('ul').slideToggle('slow', function () {
            $(this).parent().toggleClass('current');
        });

    }
    return false;
});

DEMO FIDDLE

更新

我使用了 .on 而不是 live，因为 .live() 已被弃用。

如果还有更多内容，请告诉我。