1

我有一个小问题：

我有这个清单：

<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 元素类的内容继续放在 div alfa 上并隐藏 li，其余的 li-s 保留在此列表中。

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

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

小提琴上更详细的代码http://jsfiddle.net/gxg1974/Jy3EK/

谢谢大家的提示和指导。

4

1 回答 1

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

演示小提琴

更新

我已经使用.on而不是 live as .live()is deprecated。

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

于 2013-04-16T11:50:48.600 回答