如何制作与jsFiddle相同,但不同的是绿色框应该向下滑动消失(并在您再次单击示例click here
中的链接时向上滑动出现)。
两根弦
/*position:absolute;*/
/*bottom:0px;*/
如果取消注释,则在jsFiddle的 css 部分中注释的内容无法正常工作,因为它确实开始向下滑动,但是浏览器滚动条消失了 - 不好。
添加一个<div>
带有id
sliderWrapper的 a并给它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>
继续遵循 css 规则#slider
#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); }
编辑了你的 jsFiddle!使用 jquery.slideToggle(); 和一些 Css 来获得正确的滑动方向!