0

我需要在每次单击 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
4

1 回答 1

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 创建了数据属性。
  • 现在，我一个一个地显示元素。但是在第一个元素之后。每个其他元素都将添加到父 div 上，即 #Add-element 类。

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

于 2013-10-02T11:08:20.903 回答