使用 jQuery 的 slideUp() 和 slideDown()答案

【问题标题】：slideUp() and slideDown() using jQuery使用 jQuery 的 slideUp() 和 slideDown()
【发布时间】：2014-02-27 10:24:56
【问题描述】：

嗨朋友我想通过点击一个div来制作一个简单的slideUP和slideDown但是事情是什么时候在div上舔它向下滑动但是当我再次点击div使它再次向下滑动时..请帮助伙计们你可以check fiddle here或者你可以检查下面的代码

脚本

$(document).ready(function(){

    var h = $(".slide").height();

    var h = h-15;
    alert(h);
    $(".slide").css('top','-'+h+'px')

    //var r=0, dir=true;
    $(".slide").click(function() {
        //dir = !dir;
       // r = dir? -280 : 0;

        if($(".slide").css('top','-'+h+'px'))
        {
        $(this).stop().animate({top: h+'px'}, 800);
        } else

        {
            $(this).stop().animate({top: '-'+h+'px'}, 800);
        }
    });
});

CSS

.slide {
    position:absolute;
    width:100%;
    top:-102px;
    left:0px;
    background-color:#8cc;
    cursor:pointer;
}

HTML

<div class="slide">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.
</div>

<div style="width:350px; background:#ccc;">
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
    Slide demo<br/>
</div>

【问题讨论】：

下面的答案可以工作，但这真的很简单，因为已经在 jQuery 库中查看 api.jquery.com/slideToggle
哦，我知道您不希望它完全隐藏，因为您希望用户单击 div 而不是另一个控件

标签： jquery slidedown slideup

【解决方案1】：

$(document).ready(function(){

    var h = $(".slide").height();

    var h = h-15;

    $(".slide").css('top','-'+h+'px')

    //var r=0, dir=true;
    $(".slide").click(function() {
        //dir = !dir;
       // r = dir? -280 : 0;

        if($(".slide").css('top')==-h+'px')
        {
        $(this).stop().animate({top: h+'px'}, 800);
        } else

        {
            $(this).stop().animate({top: '-'+h+'px'}, 800);
        }
    });
});

http://jsfiddle.net/DcWS2/602/

【讨论】：

【解决方案2】：

你可以像这样给元素一个数据属性

HTML

<div class="slide" data-slide="true">

jQuery

  $(".slide").click(function () {
        if ($(this).data('slide')) {//checked if true
            $(this).stop().animate({
                top: h + 'px'
            }, 800);
            $(this).data('slide', false);
        } else {
            $(this).data('slide', true);
            $(this).stop().animate({
                top: '-' + h + 'px'
            }, 800);
        }
    });

DEMO

【讨论】：

【解决方案3】：

您需要将if($(".slide").css('top','-'+h+'px')) 替换为：if($(".slide").css('top') == '-'+h+'px')

【讨论】：

【解决方案4】：

更改 if 子句的条件

HTML 代码：

<div class="slide">There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text.</div>
<div style="width:350px; background:#ccc;">Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>Slide demo
<br/>

JQUERY 代码：

$(document).ready(function () {
var h = $(".slide").height();
h = h - 15;
$(".slide").css('top', '-' + h + 'px');
$(".slide").click(function () {
    var cond = '-' + h + 'px';
    if ($(".slide").css('top').toLowerCase() == cond) {
        $(this).stop().animate({
            top: h + 'px'
        }, 800);
    } else {
        $(this).stop().animate({
            top: '-' + h + 'px'
        }, 800);
    }
 });
});

现场演示：

http://jsfiddle.net/DcWS2/615/

您的 jsfiddle 上也缺少一些小的语法错误，我也已更正它们。

快乐编码:)

【讨论】：