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