jQuery 使用 .slideToggle 从底部向上拉一个隐藏的 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14326259/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using .slideToggle to pull a hidden div up from the bottom
提问by Eric Brockman
I can't seem to figure out how to reveal hidden content from the bottom up as opposed to from the top down. I've done some homework on here and came across a solution from jQuery UI, but must be implementing it wrong. Any help is greatly appreciated - new to scripting.
我似乎无法弄清楚如何从下到上而不是从上到下显示隐藏的内容。我在这里做了一些功课，并从 jQuery UI 中找到了一个解决方案，但一定是实现它错了。非常感谢任何帮助 - 脚本新手。
cheers!
干杯！
Here's what I'm working with
这是我正在使用的
the script:
剧本：
$(document).ready(function() {
$('#clientsOpen').click(function() {
$('#clientsDropDown #clientsDashboard').slideToggle({ direction: "up" }, 300);
$(this).toggleClass('clientsClose');
}); // end click
});
the markup:
标记：
<div id="clientsDropDown">
<div id="clientsDashboard">
<p id="clientsCTA">Let's make something beautiful together...<br /><a href="mailto:[email protected]">[email protected]</a></p>
</div><!-- /clientsDashboard -->
<p id="clientsOpen">clients</p>
</div><!-- //clientsDropDown -->
The style:
样式：
#clientsDropDown {
bottom:0;
width: 100%;
padding-bottom:2%;
z-index: 100;
}
#clientsOpen {
background: url("images/open.png") no-repeat scroll 68px 10px #414142;
color: #ececec;
cursor: pointer;
float: left;
font-size: 26px;
margin: -2px 0 0 10%;
padding: 0 15px 2px;
text-decoration: none;
width: 63px;
}
#clientsCTA {
background:#414142;
width:100%;
color: #CCCCCC;
text-align:center;
font-size: 46px;
margin: 0;
padding: 30px 0;
text-decoration: none;
}
#clientsDropDown .clientsClose {
background-image: url(images/close.png);
}
#clientsDropDown #clientsDashboard {
display: none;
}
回答by j08691
Just add position:absolute;to #clientsDropDown.
只需添加position:absolute;到#clientsDropDown.
Or if you want "clients" to sit on top of the popup div, remove the float and position the paragraph above the dashboard div like in this jsFiddle example.
或者，如果您希望“客户”坐在弹出 div 的顶部，请删除浮动并将段落放置在仪表板 div 上方，就像在这个jsFiddle 示例中一样。
回答by Learner
Try changing your script to:
尝试将您的脚本更改为：
$("#clientsOpen").click(function(){
$("#clientsDashboard").slideToggle();
}, function(){
$("#clientsDashboard").slideToggle();
});
Yes and of course position the container div to absolute.
是的，当然将容器 div 定位到绝对位置。
回答by whodeee
The actual property that is changing the direction of the reveal animation is the bottomCSS property. If it were changed to topthe animation would reveal down rather than up.
改变显示动画方向的实际属性是bottomCSS 属性。如果更改为top动画将显示向下而不是向上。
Try it for #clientsDropDownin the previous fiddle provided and you will see it in action.
#clientsDropDown在前面提供的小提琴中尝试一下，您将看到它的实际效果。
