jquery slide点击链接

Question

首先，对不起，如果我不会说英语好。

我的问题是我怎么做一个div幻灯片，当我点击一个链接使用jQuery？

我有这样的：

<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> 

没有任何人有任何想法的问题是什么？谢谢

Answer 1

jQuery的.slideUp()是专门用于隐藏元素。

如果您想专门显示div，请使用.slideDown()来显示。
如果您想在显示/不显示之间切换，您也可以使用.slideToggle()。

只要将您的.slideUp('s更改为.slideDown(即可。

见this jsFiddle

Answer 2

这将解决您的功能，让您使用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); 
});