HTML / jQuery detach（）然后insertAfter（）元素

Question

当前，我已经设置好页面，以便当我单击div时，在单击的div下方会弹出一个子菜单。 我正在尝试detach（）子菜单和insertAfter（）以及左边距或浮动位置，以便它出现在被单击的div的右侧。

* 这是一张图片，显示我目前拥有和正在尝试做的事

的HTML：

<div>
    <div class="nav-name nav-padding">Alpha</div>
        <div class="Beta">
            <div class="Delta">
                <div class="Omega">A</div>
                <div class="Omega">B</div>
                <div class="Omega">C</div>
                <div class="Omega">D</div>
            </div>
        </div>
    <div class="foo" style="display: none;"></div>   
</div>

脚本：

function ClickItem() {
    $('.nav-name').click(function () {
        var itemText = $(this);
        $(this).next('.delta').slideToggle('slow');
        //$(this).next('.delta').toggle('slow');
        //itemText.next().html().detach();
        //itemText.next().html().insertAfter(.nav-name).css("margin-left", "20px");

    });
}

我不确定这是否是最好的方法，是否应该尝试使之工作。 如果有更好的方法，请随时推荐另一种方法来完成我的任务。

谢谢

Answer 1

要与Alpha分离并在Alhpa之后将其插入，请执行以下操作（ 检查链接 ）：

    var beta = $('.Beta');
    var cloned = beta.clone();
    beta.hide();
    beta.remove();
    cloned.addClass('float_left');
    $(cloned).insertAfter('#alp');

我已将id alp添加到Your Alpha div。

但是CSS仍然是更好的解决方案！