jQuery-向下滑动而不是向上滑动

如何与相同，但区别在于绿色框应向下滑动以消失（并向上滑动以在再次单击

单击此处

链接时显示）

两条弦

/*position:absolute;*/
/*bottom:0px;*/

如果取消注释，在的css部分中注释的内容将无法正常工作，因为它确实开始向下滑动，但浏览器滚动条消失-不好。

编辑了JSFIDLE！ 使用jquery.slideToggle（）；和一些Css，以获得正确的幻灯片方向

编辑：

  #slider {
      background : green;             
      width:100px;
      margin:20px auto 0 auto;
   }

 if(hid) { $('#sliderWrapper').show("slide", { direction:"down" }, 500);} 
 else { $('#sliderWrapper').hide("slide", { direction:"down" }, 500); }

添加一个带有

id的
滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖滑盖

<div width="100%" id="sliderWrapper">        
    <div id="slider" style="border:1px solid red;">
        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>F</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>E</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>D</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>C</h1>

        <h1>1</h1><h1>2</h1><h1>3</h1><h1>4</h1><h1>B</h1>

        <h1>A</h1><h1>A</h1><h1>A</h1><h1>A</h1><h1>A</h1>

         <h1>6</h1><h1>7</h1><h1>8</h1><h1>9</h1><h1>10</h1>
    </div>
</div>

将以下行替换为
$（“#滑块”）。滑块切换（500）

  #slider {
      background : green;             
      width:100px;
      margin:20px auto 0 auto;
   }

 if(hid) { $('#sliderWrapper').show("slide", { direction:"down" }, 500);} 
 else { $('#sliderWrapper').hide("slide", { direction:"down" }, 500); }

您是否看到位置：绝对；底部：0；删除我在问题中记录的向下滚动？你看不到这一页的结尾。另外，它会打断对齐，链接不会掉落。谢谢，但问题是：请仔细检查您的示例，您看不到绿色块的底部。@Haradzieniec:很抱歉，我没有注意到这一点，但现在用工作演示链接更新了我的答案。谢谢，但现在它在滑动时会跳到左侧。试图摆脱这种跳跃，仍然没有运气。是的，在firefox中注意到了，但在chrome中很好。奇怪的行为。@Haradzieniec:通过对标记进行一些调整，终于得到了有效的解决方案。请查看更新的答案。谢谢，但问题是：请仔细检查您的示例，您无法看到绿色块的底部。很抱歉，您没有注意到这一点，但现在使用工作演示链接更新了我的答案。