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

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

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

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

希望能帮助到你 ：）

Answer 2

尝试这个：

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();

Answer 3

slideToggle是否可以满足您的需求？

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

}

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

Answer 4

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

您的逻辑倒退了，请使用!= 'none'而非== '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");
});