首先,对不起,如果我说英语不好。
我的问题是当我使用jQuery点击链接时如何制作div
幻灯片?
我有这个:
<script type="text/javascript">
function slide(div) {
if($(div).css('display') === 'none'){
$(div).delay(300).slideUp(500);
return false;
} else {
$(div).delay(300).slideUp(500);
return false;
}
}
</script>
<a href="#" onclick="slide('#div1');">Click here</a>
<div id="div1" style='display: none'>
this will show
</div>
有人知道问题是什么吗?谢谢
答案 0 :(得分:0)
这将修复您的功能,您总是使用slideUp
,这样display
永远不会改变
function slide(div) {
if($(div).css('display') === 'none'){
$(div).delay(300).slideDown(500);
return false;
} else {
console.log('2');
$(div).delay(300).slideUp(500);
return false;
}
}
改为使用slideToggle
。
<a href="#" class="handler">Click here</a>
<div id="div1" style='display: none'>
this will show
</div>
$('.handler').click(function() {
$('#div1').slideToggle(500);
});
答案 1 :(得分:0)
jQuery的.slideUp()专门用于隐藏元素。
如果您想要专门显示div,请使用.slideDown()来显示 如果您想在显示/不显示之间切换,也可以使用.slideToggle()。
只需将.slideUp(
更改为.slideDown(
即可。