jQuery幻燈片單擊鏈接

Question

首先，對不起，如果我的英語不好。

我的問題是當我使用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>

有人知道問題是什么嗎？ 謝謝

Answer 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);
});

Answer 2

jQuery的.slideUp（）專用於隱藏元素。

如果要專門顯示div，請使用.slideDown（）進行顯示。
如果要在顯示/不顯示之間切換，還可以使用.slideToggle（） 。

只需將.slideUp(的）更改為.slideDown(的。

看到這個jsFiddle