在另一個div下方添加div

Question

我需要在每次單擊div按鈕時一一添加5 div。 （新的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;

}

* 我提到了這個小提琴*

**解決方案：謝謝Shivam Chopra幫助我。 萬分感謝！！ :)

對於其他人，這是解決方案**

jsfiddle.net/coolshivster/YvE5F/12

Answer 1

從兩個div刪除邊距頂部。

   #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創建了data屬性。
• 現在，我一一顯示元素。 但是在第一個元素之后。 每隔一個元素將附加在父div上，即＃Add-element類。

現在，我已經重寫了代碼。 jsfiddle鏈接： http : //jsfiddle.net/YvE5F/10/