在slideToggle之前使div指定高度，之后适合内容

Question

我有多个包含服务器名称的 div，当点击使用 jquery slideToggle 时，它​​们展开显示有权访问该服务器的帐户。例如：http://jsfiddle.net/CTBw3/

但是，与示例不同的是，未切换的 div 的宽度和高度不同，并且随着隐藏在 div 中的文本越多越长。

我想知道如何为 div 设置一个固定的宽度和高度，以便在单击之前使其统一，然后在单击后扩展为显示内容的大小？

我的代码如下：

CSS

.left {
    box-shadow: 5px 5px 5px #DEDEDE;
    float:left;
    width:20%;
    line-height:1.7em;
    padding:0px 0px 50px 0px;
    background: #1bacfa;
    background-image: -webkit-linear-gradient(top, #1bacfa, #1bacfa);
    background-image: -moz-linear-gradient(top, #1bacfa, #1bacfa);
    background-image: -ms-linear-gradient(top, #1bacfa, #1bacfa);
    background-image: -o-linear-gradient(top, #1bacfa, #1bacfa);
    background-image: linear-gradient(to bottom, #1bacfa, #1bacfa);
    -webkit-border-radius: 28;
    -moz-border-radius: 28;
    border-radius: 28px;
    font-family: Arial;
    color: #ffffff;
    font-size: 80%;
    padding: 17px 17px 17px 17px;
    border: solid #fcfcfc 0px;
    text-decoration: none;
    margin-top: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 10px;
}
.left:hover {
    background: #4bc4fc;
    background-image: -webkit-linear-gradient(top, #4bc4fc, #3fbffa);
    background-image: -moz-linear-gradient(top, #4bc4fc, #3fbffa);
    background-image: -ms-linear-gradient(top, #4bc4fc, #3fbffa);
    background-image: -o-linear-gradient(top, #4bc4fc, #3fbffa);
    background-image: linear-gradient(to bottom, #4bc4fc, #3fbffa);
    text-decoration: none;
}

HTML

    <div class="left">
    <h1 style="display: block;">ADAL459</h1>
    <span class="info" style="display: none;">
    <b>Account Name: </b>
    null
    <br>
    <b>Application Name: </b>
    CPS
    <br>
    <b>Server Subtype: </b>
    null
    <br>
    <b>Server Type: </b>
    null
    <br>
    <i onclick="wasClicked(0)" style="color:#b6e4fd;">Click to choose</i>
    </span>
    <br style="display: inline-block;">
    <br style="display: inline-block;">
    <span class="info" style="display: none;">
    <b>Account Name: </b>
    null
    <br>
    <b>Application Name: </b>
    CPS
    <br>
    <b>Server Subtype: </b>
    null
    <br>
    <b>Server Type: </b>
    null
    <br>
    <i onclick="wasClicked(1)" style="color:#b6e4fd;">Click to choose</i>
    </span>
    <br style="display: inline-block;">
    <br style="display: inline-block;">
    <span class="info" style="display: none;">
    <b>Account Name: </b>
    null
    <br>
    <b>Application Name: </b>
    CPS
    <br>
    <b>Server Subtype: </b>
    null
    <br>
    <b>Server Type: </b>
    null
    <br>
    <i onclick="wasClicked(2)" style="color:#b6e4fd;">Click to choose</i>
    </span>
    <br style="display: inline-block;">
    <br style="display: inline-block;">
    <span class="info" style="display: none;">
    <b>Account Name: </b>
    null
    <br>
    <b>Application Name: </b>
    CPS
    <br>
    <b>Server Subtype: </b>
    null
    <br>
    <b>Server Type: </b>
    null
    <br>
    <i onclick="wasClicked(3)" style="color:#b6e4fd;">Click to choose</i>
    </span>
    <br style="display: inline-block;">
    <br style="display: inline-block;">
    <span class="info" style="display: none;">
    <b>Account Name: </b>
    null
    <br>
    <b>Application Name: </b>
    CPS
    <br>
    <b>Server Subtype: </b>
    null
    <br>
    <b>Server Type: </b>
    null
    <br>
    <i onclick="wasClicked(4)" style="color:#b6e4fd;">Click to choose</i>
    </span>
    <br style="display: inline-block;">
    <br style="display: inline-block;">
    <span class="info" style="display: none;">
    <b>Account Name: </b>
    null
    <br>
    <b>Application Name: </b>
    CPS
    <br>
    <b>Server Subtype: </b>
    null
    <br>
    <b>Server Type: </b>
    null
    <br>
    <i onclick="wasClicked(5)" style="color:#b6e4fd;">Click to choose</i>
    </span>
    <br style="display: inline-block;">
    <br style="display: inline-block;">
    </div>
<div class="left">
    <h1>ADAL460</h1><span class="info" style="display: none;"><b>Account Name: </b>null<br><b>Application Name: </b>CPS<br><b>Server Subtype: </b>null<br><b>Server Type: </b>null<br><i onclick="wasClicked(6)" style="color:#b6e4fd;">Click to choose</i></span>
    <br>
    <br><span class="info" style="display: none;"><b>Account Name: </b>null<br><b>Application Name: </b>CPS<br><b>Server Subtype: </b>null<br><b>Server Type: </b>null<br><i onclick="wasClicked(7)" style="color:#b6e4fd;">Click to choose</i></span>
    <br>
    <br><span class="info" style="display: none;"><b>Account Name: </b>null<br><b>Application Name: </b>CPS<br><b>Server Subtype: </b>null<br><b>Server Type: </b>null<br><i onclick="wasClicked(8)" style="color:#b6e4fd;">Click to choose</i></span>
    <br>
    <br><span class="info" style="display: none;"><b>Account Name: </b>null<br><b>Application Name: </b>CPS<br><b>Server Subtype: </b>null<br><b>Server Type: </b>null<br><i onclick="wasClicked(9)" style="color:#b6e4fd;">Click to choose</i></span>
    <br>
    <br>
</div>

jQuery

$(".info").hide();

$(".left").click(function () {
    $(this).children().slideToggle();
});

仅供参考，“wasClicked()”函数所做的唯一一件事就是弹出一个警告框。

Answer 1

JS 代码更新：(http://jsfiddle.net/CTBw3/1/)

然而，这不是很漂亮，因为其中一个盒子很大！第三个框很奇怪，因为与其他框相比，您有很长的 HTML 重复内容

var max =0;
$(".left").each(function(){
    if(parseInt($(this).height()) > max){
        max = parseInt($(this).height());
    }
});

$(".left").css("height",max+"px");
$(".info").hide();

$(".left").click(function () {
    $(this).children().slideToggle();
});