jquery.slideup函數不會隱藏div

Question

我使用下面的代碼來顯示和隱藏名爲「地圖」的div 當點擊帶有'goo'id的鏈接時，地圖顯示使用.slideDown，但是當鏈接被再次點擊，SUPPOSE使用.slideUp來隱藏地圖，但沒有任何反應。

這裏是JavaScript：

$('#goo').live('click',function() { 
    if ($("#map").css('visibility','hidden')){ 
    $('#map').slideDown('slow'); 
    $("#map").css('visibility','visible'); 
    $("#map").css('position','relative'); 
    } else { 
    $('#map').slideUp('slow'); 
    } 
    return false; 
    }); 

如果任何人有任何想法，那麼div會不會滑動，讓我知道！

Answer 1

回答你的問題，爲什麼它不工作...如果情況需要改變你的...否則其他一切都很好....你需要檢查

if($("#map").css('visibility') == 'visible') 

否則其良好的

查看同樣的小提琴http://jsfiddle.net/xsFRJ/

Answer 2

jQuery的.slideUp()和.slideDown()函數不影響CSS visibility屬性。您應該使用display: none;而不是visibility: hidden以更好地符合您嘗試使用的功能。

下面是使用display: none;的的jsfiddle：http://jsfiddle.net/jasper/2QWEM/1/

如果你想你的元素仍然卷取空間，同時它是無形的，那麼我建議使用opacity: 0;和動畫元素的不透明度：

$('#goo').live('click',function() { 
    if ($("#map").css('opacity') == 0){ 
    $('#map').animate({opacity : 1}, 500); 
    } else { 
    $('#map').animate({opacity : 0}, 500); 
    } 
    return false; 
    }); 

Google文件.slideUp()：http://api.jquery.com/slideup

在一個側面說明，您使用的是相同的選擇很多時候過度，你可以鏈函數調用並緩存您的選擇器以提高性能。下面是使用你的代碼的例子：

$('#goo').live('click',function() { 
    var $map = $('#map'); 
    if ($map.css('visibility','hidden')){ 
     $map.slideDown('slow').css({ 
      visibility : 'visible', 
      position : 'relative' 
     } 
    } else { 
     $map.slideUp('slow'); 
    } 
    return false; 
}); 

Answer 3

使用slideToggle方法

$('#goo').live('click',function() { 
    $('#map').slideToggle('slow'); 
    return false; 
});