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在滑动后更改其大小

回答

相关问题