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中应该是这样的：{{1} }

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

SlideUp / SlideDown不太合适

4 个答案: