jQuery - 向下滑动，而不是向上滑动 [英] jQuery - slide down instead of slide up

问题描述

如何使用相同的 jsFiddle ，但区别是绿色框应向下滑动消失（当您点击链接

 
两个字符串
 code> / * position：absolute; * / 
 / * bottom：0px; * / 
  

$ b b

在 jsFiddle 的css部分中注释的内容无效，如果取消注释，因为它

解决方案

修改：

添加< div> 和 id sliderWrapper 并给出 100％ width 。

 < div width =100％id =sliderWrapper> 
< div id =sliderstyle =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& / h1> 
 
< h1> 1< / h1>< h1> 2< / h1>< h1> 3< / h1>< h1> 4< / h1>< h1> / h1> 
 
< h1> 1< / h1>< h1> 2< / h1>< h1> 3< / h1>< h1> 4< / h1>< h1> / h1> 
 
< h1> 1< / h1>< h1> 2< / h1>< h1> 3< / h1>< h1> 4< / h1>< h1> / h1> 
 
< h1> A< / h1>< h1> A< / h1>< h1> A< / h1>< h1> A< / h1>< h1& / h1> 
 
< h1> 6< / h1>< h1> 7< / h1>< h1> 8< / h1>< h1> 9< / h1>< h1> / h1> 
< / div> 
< / div> 
  

请遵守 #slider

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

#slider'）。slideToggle（500）

  if（hid）{$ （'#sliderWrapper'）。show（slide，{direction：down}，500）;} 
 else {$（'＃sliderWrapper'）。 }，500）; } 
  

查看演示

How to make the same as jsFiddle, but the difference is the green box should slide down to disappear (and slide up to appear when you click the click here link in the example one more time).

The two strings

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

which are commented in the css part of jsFiddle doesn't work well if uncomment because it really starts to slide down, but the browser scroll bar disappers - not good.

解决方案

Edited:

Add a <div> with an id sliderWrapper and give it 100% width as given below.

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

Keep following css rules for #slider

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

Replace following line with $('#slider').slideToggle(500)

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

SEE DEMO

这篇关于jQuery - 向下滑动，而不是向上滑动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！