Question

从隐藏状态开始，它不起作用，否则不起作用，我错过了什么我想隐藏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>

Answer 1

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

来自.slideToggle() jQuery docs：

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

Answer 2

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

检查 Demo jsFiddle

的jQuery

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

display:none;属性当页面加载时显示无，但是当您单击图像幻灯片切换效果工作时。希望这能帮到你！

从隐藏状态切换幻灯片div

2 个答案:

的jQuery