Question

我有一个小脚本（网页的完整代码放在下面），它将一些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非常具体。它们构成了一种拼图：100平方10×10，粘在一起。他们不应该为每个人创建一个新行，而且他们应该是空的。

  .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，这非常重要。

但问题是，在动画停止后，面板的下边框会立即跳跃。 div仍然在面板和页面正文之间。

我不知道如何解决这个问题，并请求你的帮助。

此处插入完整代码，因此您可以轻松尝试：

<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>

P.S。如果我要将一个元素引用到一个元素我应该做什么：

// 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... */

Answer 1

我找到了两种方法来解决这个问题。 1）将float属性添加到父div（.panel） 2）从.addDiv中删除float属性，改为使用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%;
}

希望这有帮助。

滑动后Div改变其大小

1 个答案: