2

我似乎无法弄清楚如何从下到上而不是从上到下显示隐藏的内容。我在这里做了一些功课，并从 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;  
}
4

3 回答 3

11

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

jsFiddle 示例

或者，如果您希望“客户”位于弹出 div 的顶部，请移除浮动并将段落放置在仪表板 div 上方，就像在这个jsFiddle 示例中一样。

于 2013-01-14T20:44:20.630 回答
1

尝试将脚本更改为：

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

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

于 2013-01-14T20:44:50.630 回答
0

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

#clientsDropDown在前面提供的小提琴中尝试一下，你会看到它在起作用。

于 2017-10-02T15:46:11.017 回答