Question

我正在使用下面的代码来显示和隐藏名为＆＃34; map＆＃34;的div。当一个带有id＆＃39; goo＆＃39;的链接单击地图使用.slideDown显示，但是当再次单击链接时，使用.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

使用 slideToggle 方法

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

Answer 2

jQuery的.slideUp()和.slideDown()函数不会影响CSS visibility属性。您应该使用display: none;而不是visibility: hidden来更好地符合您尝试使用的功能。

以下是使用display: none;：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;
  });

.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

回答你的问题为什么它不起作用...你的条件需要改变......否则其他一切都很好....你需要检查

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

其他好的

查看相同http://jsfiddle.net/xsFRJ/

的小提琴

Jquery .slideup函数不会隐藏div

3 个答案: