使用 .slideToggle 从底部拉出隐藏的 div

Posted

技术标签:

【中文标题】使用 .slideToggle 从底部拉出隐藏的 div【英文标题】:Using .slideToggle to pull a hidden div up from the bottom 【发布时间】:2013-01-14 20:39:32 【问题描述】:

我似乎无法弄清楚如何从下到上而不是从上到下显示隐藏的内容。我在这里做了一些功课,并从 jQuery UI 中找到了一个解决方案,但一定是错误地实现了它。非常感谢任何帮助 - 脚本新手。

干杯!

这就是我正在使用的东西

脚本:

$(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:brockman.eric@gmail.com">brockman.eric@gmail.com</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;  

【问题讨论】:

据我所知,slideToggle() 的默认设置是向上滑动,因此不需要direction: up 选项。如果您将其从最佳答案小提琴中删除,则它仍会向上滑动。此外,对于 slideToggle() 函数,direction 是 not even a listed option。 【参考方案1】:

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

jsFiddle example

或者,如果您希望“客户”位于弹出 div 的顶部,请移除浮动并将段落置于仪表板 div 上方,如 jsFiddle example 所示。

【讨论】:

这很好用,但是当它向上滑动时,它会覆盖底部的内容,而不是向上推动其他内容以腾出空间。鉴于它是绝对定位的,我想没有办法解决这个问题? 对,如果你绝对定位它,它会从文档流中取出,所以页面上的其他内容在滑动时不会被推送。【参考方案2】:

尝试将脚本更改为:

$("#clientsOpen").click(function()
    $("#clientsDashboard").slideToggle();
, function()
    $("#clientsDashboard").slideToggle();
);

是的,当然将容器 div 定位为绝对值。

【讨论】:

啊,是的!谢谢@j08691,效果很好,底部有一个打开按钮,因为我从文档顶部使用的脚本中偷了它,但绝对定位是一个教训。【参考方案3】:

改变显示动画方向的实际属性是bottom CSS 属性。如果将其更改为top,动画将向下显示而不是向上显示。

在前面提供的小提琴中尝试#clientsDropDown,您将看到它的实际效果。

【讨论】:

以上是关于使用 .slideToggle 从底部拉出隐藏的 div的主要内容,如果未能解决你的问题,请参考以下文章

jQuery 效果 - slideToggle() 方法

jQuery slideToggle,显示/隐藏速度

jQuery slideToggle 只是显示和隐藏,但动画不正确

jQuery slideToggle,显示/隐藏速度

slideToggle()---单击隐藏/浮现--jQuery--click() 方法

jQuery slideToggle 关闭时跳转