我有2个水平放置的div(float:left; width:50%;
)。但是我希望height:500px
给他们overflow:hidden
并在底部显示展开/缩放按钮。如何使用jquery创建它?
<div id="tab-two">
<ul class="nav">
<li class="nav-one"><a href="#featured" class="current">last</a></li>
<li class="nav-two"><a href="#core">popular</a></li>
</ul>
<div class="list-wrap">
<ul id="tabclick">
<li>
***content***
</li>
</ul>
</div>
</div>
<style>
#tab-two {
background: none repeat scroll 0% 0% #FFFFFF;
border-radius: 4px 4px 4px 4px;
border-right: 1px solid #CCCCCC;
margin: 0pt 1% 5px 0pt;
padding: 1px 0pt 0pt 5px;
}
</style>
答案 0 :(得分:0)
我没有看到你的代码中有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>