Question

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

然而，与示例不同，我的div不是相同的宽度和高度未被遮挡，并且随着div中隐藏的文本越多，我的div越长。 preview of page

我想知道在点击之前如何为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();
});

就像fyi一样，“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();
});

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

1 个答案: