我看不到您的代码中有 2 个 div 可以按描述的方式运行。我为你解决了这个问题。您应该能够对其进行编辑以适合您的 HTML/CSS 标记:
<style type="text/css">
.floatBox {
position: relative;
float: left;
width: 50%;
height: 500px;
overflow: hidden;
display: block;
}
.boxContent {
display: table;
}
a.expandLink {
width: 100%;
height: 30px;
background: #059;
color: #fff;
position: absolute;
bottom: 0;
text-align: center;
display: block;
}
</style>
<script>
var collapseH = 500; // set the height of your collapse state
$(document).ready(function() {
$('.expandLink').click(function() {
var $link = $(this);
var $box = $link.parents('.floatBox'); // get parent with class="floatBox"
var innerH = $box.children('.boxContent').innerHeight(); // get height of inner HTML
var linkH = $link.height(); // get height of link to add to your animation
if ($box.height() == collapseH) { // if the box is collapsed
// animate to full inner height
$box.stop().animate({
height: innerH+linkH
}, 500);
// change text of link
$link.html('collapse');
} else { // if it is expanded
// animate to collapsed height
$box.stop().animate({
height: collapseH
}, 500);
// change text of link
$link.html('expand');
}
return false;
});
});
</script>
<div id="container" style="width: 800px;">
<div class="floatBox">
<div class="boxContent">
<!-- PUT YOUR CONTENT HERE -->
</div>
<a href="#" class="expandLink">expand</a>
</div>
<div class="floatBox">
<div class="boxContent">
<!-- PUT YOUR CONTENT HERE -->
</div>
<a href="#" class="expandLink">expand</a>
</div>
</div>