使用.slideToggle从底部向上拉一个隐藏的div [英] Using .slideToggle to pull a hidden div up from the bottom

问题描述

我似乎无法弄清楚如何从下至上而不是从上至下显示隐藏的内容.我在这里做了一些家庭作业，并遇到了jQuery UI的解决方案，但必须将其实现错误.非常感谢您的帮助-脚本编写的新手.

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.

欢呼！

这就是我正在工作的

脚本:

$(document).ready(function() {
  $('#clientsOpen').click(function() {
     $('#clientsDropDown #clientsDashboard').slideToggle({ direction: "up" }, 300);
 $(this).toggleClass('clientsClose'); 
  }); // end click
});

标记:

<div id="clientsDropDown">
<div id="clientsDashboard">
    <p id="clientsCTA">Let's make something beautiful together...<br /><a href="mailto:[e-mail]">[e-mail]</a></p>
</div><!-- /clientsDashboard -->
<p id="clientsOpen">clients</p>
</div><!-- //clientsDropDown -->

样式:

#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;  
}

推荐答案

只需将position:absolute;添加到#clientsDropDown.

jsFiddle示例

jsFiddle example

或者，如果您希望客户"位于弹出div的顶部，请删除浮动内容并将该段落放置在仪表板div上方，例如在此

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.

这篇关于使用.slideToggle从底部向上拉一个隐藏的div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！