將div加在另一個div下面

我有要求每次點擊一個div按鈕時一個一個添加5個div。（新的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; 

}

*I referred this Fiddle *

**解決方法：三江源Shivam喬普拉對我的幫助。萬分感謝！！ :)

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

jsfiddle.net/coolshivster/YvE5F/12

來源

2013-10-02 gs11111

創建一個小提琴請 –

@Mohsen http://jsfiddle.net/SFRgz/我refered這個小提琴，請檢查 – gs11111

什麼是地獄!!!!你撥弄和張貼有問題的代碼是完全不同的...你是什麼actulayy試着做？請只發布相關代碼 – bipen

刪除保證金頂無論從股利。

#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 =父div元素的一些解釋「添加元素」，涵蓋含有類.toAdd每一個元素。
然後我爲每個包含class .toAdd的div創建數據屬性。
現在，我逐個顯示元素。但在第一個元素之後。每個其他元素將預先放置在父div上，即＃Add-element類。

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

來源

2013-10-02 11:08:20

謝謝你的時間來創建小提琴Shivam Chopra :) 我需要短跑作爲新的div被添加。你能幫助我嗎？ – gs11111

我需要該邊緣作爲設計的一部分。還有什麼可以做的？ – gs11111

我已經用第二個鏈接中的新代碼更新了答案。 http://jsfiddle.net/coolshivster/YvE5F/9/ 現在，在爲您的設計使用margin-top時沒有問題。 –

將div加在另一個div下面

回答

相關問題