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帮助我。万分感谢！！：）

对于其他人来说，HEre就是解决方案**

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/

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

我创建了一个父div元素，其id =＆＃34; Add-element＆＃34;它涵盖了包含类.toAdd。
然后我为包含类.toAdd。
现在，我逐个显示元素。但在第一个元素之后。每个其他元素都将在父div之前，即#Add-element class。

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

在另一个div下面添加div

1 个答案: