javascript - 在另一个 div 下面添加 div

Question

我需要在每次单击 div 按钮时一个一个地添加 5 个 div。 (新的 div 应该添加到现有的 div 下面)我完成了代码，但新闻正在附加到现有 div 的顶部。请帮助纠正这个问题。我有另一个按钮，可以一个一个地删除添加的 div(首先删除新的)这是我的代码。

  <div class="clearFix"></div>
     <div id="containershowmore" >
        <div id="dragbtnmore" style="cursor: default;">Show more buttons</div>
        <div id="dragbtnless" style="cursor: default;">Show Fewer buttons</div>
    </div>

 <div class="toAdd" style="display:none;" >
                <div id="dragdashboardmain" style="cursor: pointer;">dash</div></div>
    <div class="toAdd" style="display:none;" >
        <div id="dragrcalendar" style="cursor: pointer;">Calendar</div></div>
    <div class="toAdd" style="display:none;">
        <div id="dragresourcelist" style="cursor: pointer;">Rlist</div></div>
    <div class="toAdd" style="display:none;">
        <div id="dragdailynotes" style="cursor: pointer;">D Notes</div></div>
    <div class="toAdd" style="display:none;">
        <div id="dragweeklynotes" style="cursor: pointer;">W Notes</div></div>

脚本:

$("#dragbtnmore").click(function () {
        $('.toAdd').each(function () {
            if ($(this).css('display') == 'none') {
                $(this).css('display', 'block');
                return false;
            }
        });
        var i = 0;
        $('.toAdd').each(function () {
            if ($(this).css('display') != 'none') {
                i++;
            }
        });
        if (i == 5)
            $('#dragbtnmore').click(function () { return false; });
    });
    $("#dragbtnless").click(function () {
        $('.toAdd').each(function () {
            if ($(this).css('display') == 'block') {
                $(this).css('display', 'none');
                return false;
            }
        });
        var i = 0;
        $('.toAdd').each(function () {
            if ($(this).css('display') != 'block') {
                i++;
            }
        });
        if (i == 5)
            $('#dragbtnless').click(function () { return false; });
        $('#dragbtnless').click(function () { return true; });
    });

    $("#containershowmore").mouseleave(function () {
        $(this).hide();
    });
    function showmore() {
        document.getElementById('containershowmore').style.display = "block";
    }

风格:

#containershowmore
{
    margin-top: -75px;position: relative;margin-left: 160px;background-color: #b1dafb;z-index: 1;
width: 125px;
float: right;
padding-left: 5px;
}

.toAdd
{

background-color: blue;
margin-top: -55px;
position: relative;
margin-bottom: 14px;

}

*I referred this Fiddle *

**解决方案:谢谢 Shivam Chopra 帮助我。万分感谢!! :)

对于其他人，这是解决方案**

jsfiddle.net/coolshivster/YvE5F/12

Answer 1

从两个 div 中移除 margin top。

   #containershowmore
{
position: relative;margin-left: 160px;background-color: #b1dafb;z-index: 1;
width: 125px;
    float:right;
padding-left: 5px;
}
#dragbtnmore{
    margin-bottom:10px;
    border:1px solid black;
}

.toAdd
{
height:20px;
    width:70px;
background-color: blue;
position: relative;
margin-bottom: 14px;

}

然后，它将相应地工作。在这里，代码:http://jsfiddle.net/coolshivster/YvE5F/

我已经根据您的要求重写了您的代码。关于代码的一些解释

• 我创建了一个 id="Add-element"的父 div 元素，它覆盖了包含类 .toAdd 的每个元素。
• 然后我为每个包含类 .toAdd 的 div 创建数据属性。
• 现在，我将逐一显示元素。但是在第一个元素之后。所有其他元素都将添加到父 div 之前，即 #Add-element class。

现在，我重写的代码。jsfiddle 链接:http://jsfiddle.net/YvE5F/10/