Question

目前，我已经设置了我的页面，这样当我点击一个div时，子菜单弹出窗口会出现在我单击的div下面。我试图分离（）子菜单和insertAfter（）和margin-left或float，使它出现在被点击的div的右侧。

* Here is a picture Example of what I currently have and what I am trying to do

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之后插入这样做（check the link）：

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

我已将id alp添加到你的Alpha div。

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

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

1 个答案: