从隐藏状态切换幻灯片 div答案

【问题标题】：Toggle slide div from hidden state从隐藏状态切换幻灯片 div
【发布时间】：2014-03-30 17:26:26
【问题描述】：

从隐藏状态它不起作用 if 和 else 不起作用，我错过了什么我希望隐藏 div 层#divbio，然后单击时滑动

 <html>
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("img").click(function(){
 if ( $('#divbio').slideToggle('visibility') == 'hidden' )
      $('#divbio').slideToggle('visibility','visible');
  else
  $('#divbio').slideToggle('visibility','hidden');
  });

  $("#divbio").slideToggle(500);
 });
});
</script>
</head>
<body>
<image onclick="Toggle slideUp() and slideDown();"><img src="images/image.gif" width="64" height="39" border="0" /></image> 
<div id="divbio" style="position:absolute; left:35px; top:119px; width:629px; height:792px; z-index:17; background-color: #000000; layer-background-color: #000000; border: 1px none #000000; background-image: url(Back.jpg); layer-background-image: url(Back.jpg); visibility: hidden;">

这有效，但从加载中可见

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("img").click(function(){
  $("#divbio").slideToggle(500);
 });
});
</script>
</head>
<body>
<image onclick="Toggle slideUp() and slideDown();"><img src="images/images.gif" width="64" height="39" border="0" /></image> 
<div id="divbio" style="position:absolute; left:35px; top:119px; width:629px; height:792px; z-index:17; background-color: #000000; layer-background-color: #000000; border: 1px none #000000; background-image: url(Back.jpg); layer-background-image: url(Back.jpg); visibility: hidden;"> 
  <p>CONTENT</p>
</div>


</body>
</html>

【问题讨论】：

标签： html layer

【解决方案1】：

不要使用visibility，而是使用display，因为这是slideToggle() 修改的内容。

来自.slideToggle() jQuery docs：

display 属性会根据需要进行保存和恢复。如果一个元素的display 值为inline，然后被隐藏并显示，它将再次显示 inline。隐藏后高度为0时动画，display 样式属性设置为 none 确保该元素不再影响页面布局。

【讨论】：

【解决方案2】：

您可以使用 display:none; 属性代替 visibility: hidden;，请检查以下内容

检查这个Demo jsFiddle

jQuery

$(document).ready(function(){
    $("img").click(function(){
        $('#divbio').slideToggle();
    });
});

display:none; 属性在页面加载时不会显示，但在单击图像时滑动切换效果起作用。希望对您有所帮助！

【讨论】：