javascript - SlideUp/SlideDown 不太好用

Question

我有一个切换元素的功能：

function toggle(elemName) {
    text = document.getElementById(elemName);
    var isHidden = text.style.display == 'none';
    text.style.display = isHidden ? 'block' : 'none';

    if (text.style.display == 'none') {
        $(text).slideUp();
    }
    else {
        $(text).slideDown();
    }
    return false;
}

我真正需要的是，如果它被隐藏，则向下滑动，如果它是可见的，则将其向上滑动并使其消失。

它正在隐藏和显示，但滑动不起作用。

有什么问题？

谢谢

Answer 1

slideToggle 会满足您的需求吗？

function toggle(elemName) {
    text = document.getElementById(elemName);
    $(text).slideToggle();

}

http://jsfiddle.net/kmd97/heVEE/

Answer 2

请参阅工作演示http://jsfiddle.net/CAeSD/4/

你有你的逻辑倒退，使用!= 'none'not == 'none'。

还要删除你说这样的话：

var isHidden = text.style.display == 'none';
text.style.display = isHidden ? 'block' : 'none';

所以工作代码如下：

function toggle(elemName) {
    text = document.getElementById(elemName);

    if (text.style.display != 'none') {
        $(text).slideUp();
    }
    else {
        $(text).slideDown();
    }
    return false;
}

$("#name").on('click', function(){
                  toggle("txt");
});

Answer 3

您在调用slideUp()or之前隐藏元素slideDown()。

删除此行，它应该可以正常工作：

text.style.display = isHidden ? 'block' : 'none';

希望能帮助到你 ：）

Answer 4

尝试这个：

function customToggle(elemId) {
    var elem = $('#'+elemId);

    if ( elem.is(':visible') ) { elem.slideUp(); }
    else { elem.slideDown(); }
}

$(document).ready(function() {
    customToggle('myId');
});

请注意，在您的示例$(text).slideUp();中不起作用，因为文本将仅返回 id 名称，如下所示：$('myId').slideUp();并且在 jQuery 中应该是这样的：$('#myId').slideUp();