我在整个 Stack Overflow 上搜索了这个,找到了很多答案,但没有一个能满足我的具体要求……基本上我不知道为什么这段代码不起作用,请有人帮忙!非常感谢任何输入,谢谢!
这是带有 div
的 HTML,点击 id
为 elementTop
和 div
以动画高度显示的是 elementBottom
<div id="elementTop" onclick="toggle_visibility('elementBottom');" >
<img id="thumb" src="images/davey1.png" />
<a>davey blair</a>
</div>
<div id="elementBottom">
<p><span style="font-weight: bold;">age: </span>29</p>
<p><span style="font-weight: bold;">hometown: </span>Charleston,SC</p>
<p><span style="font-weight: bold;">regular or goofy: </span>Regular</p>
<p><span style="font-weight: bold;">years shredding: </span>lifetime</p>
<p><span style="font-weight: bold;">other sponsors: </span>naish, chucktown</p>
<p><span style="font-weight: bold;">favorite trick: </span>switch mobe</p>
<p><span style="font-weight: bold;">favorite place to shred: </span>with my homies</p>
<p><span style="font-weight: bold;">music preference: </span>all music</p>
<p><span style="font-weight: bold;">paper or plastic: </span>hands</p>
<p><span style="font-weight: bold;">cat or dog: </span>dogs</p>
<p><span style="font-weight: bold;">other hobbies: </span>living life. work to live never live to work, live life.</p>
</div>
这里是我正在使用的 JavaScript/jQuery 和我注释掉的 JavaScript 行,但是没有注释的 jQuery 不起作用。
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.height == 'auto') {
// e.style.height = '0px';
$('#' + e).animate({height:'0px'});
} else {
// e.style.height = 'auto';
$('#' + e).animate({height:'auto'});
}
}
最佳答案
这行得通,但你永远无法将它动画化,因为当它的高度为 0px
时你无法点击该元素:
http://jsfiddle.net/neuroflux/UYZY2/23/
剪下!
function toggle_visibility(id) {
$(id).stop().animate({height:'toggle'}, 500);
}
$('.clicker').on('click', function() {
toggle_visibility('#' + $(this).attr('name'));
});
关于javascript - 在单击另一个 div 时为 div 中的高度变化设置动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18213046/