请参阅下面的代码...
我很困惑，想最初显示下面 div 的 30px(高度)。目前我只能切换显示或隐藏。
我真正想要的是显示前 30px 并切换/显示下面包含的任何内容。
<html>
<head>
<script class="jsbin" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<meta charset=utf-8 />
<script type="text/javascript">
$(document).ready(function() {
// Hide the "view" div.
$('div.view').hide();
// Watch for clicks on the "slide" link.
$('div.slide').click(function() {
// When clicked, toggle the "view" div.
$('div.view').slideToggle(400);
return false;
});
});
</script>
</head>
<body>
<div class="view">
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
<p>shown/hidden depending on the toggle above. </p>
</div>
<div class="slide" style="cursor: pointer;">Show/Hide</div>
</body>
</html>
谢谢
最佳答案
试试这个
添加此CSS
.view{
overflow:hidden;
height: 30px;
}
JS
$(document).ready(function() {
var $divView = $('div.view');
var innerHeight = $divView.removeClass('view').height();
$divView.addClass('view');
$('div.slide').click(function() {
$('div.view').animate({
height: (($divView.height() == 30)? innerHeight : "30px")
}, 500);
return false;
});
});
<强> Demo
关于jquery 展开/切换 - 初始 div 大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8946501/