Div在滑動後更改其大小

我有一個小腳本（網頁的完整代碼位於下方），它將一些div添加到由按鈕單擊激活的滑動面板。Div在滑動後更改其大小

<script type="text/javascript"> 
    // Click the button and let the panel slide. 
    $('#button').click(function(){ 
     $('.panel').slideToggle('slow'); 
    }); 

    // Insert a huge amount of divs. 
    var divsToPlace = 100; 
    for (i = 0; i < divsToPlace; i++) { 
     $('<div/>', {'class': 'addDiv'}).appendTo('#addHere'); 
    } 
</script>

Divs確實具體。他們形成了一種謎題：10×10的100格，粘在一起。他們不應該爲他們每個人創建一個新行，他們應該是空的。

.addDiv { 
    border: 1px solid #000; 
    margin-top: -1px;  /* these two provide a "net" */ 
    margin-right: -1px; 
    float: left;    /* doesn't allow divs to start from a new line. */ 
    width: 10px; 
    height: 10px; 
    }

所以我希望得到的結果是一個有「網」的面板。 Div必須通過腳本插入，這非常重要。

但問題是面板的底部邊框在動畫停止後跳起來。 divs保留在面板和頁面主體之間。

我不知道如何解決這個問題，我請求你的幫助。

完整的代碼在這裏插入，這樣你就可以輕鬆地嘗試：

<html> 
<head> 
    <style type="text/css"> 
    #header { 
    margin: auto; 
    width: 100px; 
    text-align: center; 
    } 
    .addDiv { 
    border: 1px solid #000; 
    margin-top: -1px; 
    margin-right: -1px; 
    float: left; 
    width: 10px; 
    height: 10px; 
    } 
    .panel { 
    border: 1px solid #666; 
    display: none; 
    margin: auto; 
    width: 305px; 
    } 
    </style> 
</head> 

<body> 
    <div id='header'><button id='button'>Panel</button></div> 
    <div class='panel'> 
    List: 
    <ul> 
     <li>li 1</li> 
     <li>li 2</li> 
    </ul> 
    <div id='addHere'></div> 
    </div> 
</body> 

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script> 
<script type="text/javascript"> 
    $('#button').click(function(){ 
     $('.panel').slideToggle('slow'); 
    }); 

    var divsToPlace = 100; 
    for (i = 0; i < divsToPlace; i++) { 
     $('<div/>', {'class': 'addDiv'}).appendTo('#addHere'); 
    } 
</script> 
</html>

附：如果我很多地提到一個元素，我應該怎麼做：

// This way? 
/* ... code 
$('#element').thing(); 
$('#element').another_thing(); 
... code ... 
$('#element').more_thing(); 
code... */ 

// Or this way? 
/* ... code 
var element = $('#element'); 
element.thing(); 
element.another_thing(); 
... code ... 
element.more_thing(); 
code... */

來源

2014-04-03 LarsFox

用這個創建一個js小提琴，它會更容易幫助你。 –

對於初學者，我會創建僅具有正確和底部邊距的div，因此您不必使用負邊距 –

我找到了兩種方法來解決這個問題。 1）將float屬性添加到父div（.panel） 2）從.addDiv中刪除浮動屬性，而是使用display：inline-block。創建一個新規則來刪除#addHere中的行高。看到這個小提琴。 http://jsfiddle.net/QeADw/

.addDiv { 
    border: 1px solid #000; 
    margin-right: -1px; 
    margin-top:-1px; 
    width: 10px; 
    height: 10px; 
    display:inline-block; 
    } 
#addHere{ 
    line-height:1%; 
}

希望這會有所幫助。

來源

2014-04-03 20:19:12 meow

Div在滑動後更改其大小

回答

相關問題