javascript - 在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();
});