Question

如何与jsFiddle相同，但不同之处在于绿色框应向下滑动以消失（并向上滑动以便在您点击example中的click here链接时显示再来一次）。

两个字符串

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

在jsFiddle的css部分中注释的

在取消注释时效果不佳，因为它确实开始向下滑动，但浏览器滚动条消失 - 不好。

Answer 1

编辑：

使用<div> sliderWrapper 添加id，并为其提供100% 宽度，如下所示。

<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>

继续遵循#slider

的css规则

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

将以下行替换为$('#slider').slideToggle(500)

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

SEE DEMO

Answer 2

编辑你的jsFiddle！使用jquery.slideToggle（）;和一些Css来获得正确的滑动方向！

<强> jsFiddle

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

2 个答案:

编辑：