jquery幻灯片点击链接答案

【问题标题】：jquery slide click linkjquery幻灯片点击链接
【发布时间】：2012-12-26 17:17:05
【问题描述】：

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

我的问题是当我使用 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>

有人知道问题出在哪里吗？谢谢你

【问题讨论】：

标签： javascript jquery html click href

【解决方案1】：

这将修复您的功能，您始终使用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);
});

【讨论】：

【解决方案2】：

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

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

只需将您的 .slideUp( 更改为 .slideDown(。

见this jsFiddle

【讨论】：

然后你想要 slideToggle()。将 JSfiddle 更改为使用 slideToggle
下次尝试更具体地回答您的问题 :)