我正在尝试在我的网站顶部创建一个工具栏类型部分。我只需要一个默认隐藏的 div,以及一个挂在该 div 底部的按钮。单击它时,div 应向下滑动(按钮仍位于底部)。单击后,它应该向上滑动。
这是我目前拥有的:
<div id="account_toolbar" style="background-color:#fff;">
<div id="toolbar_contents" style="display:none;"> This is the account toolbar so far
</div>
<div id="button" style="background-color: #ff0000;"><%= image_tag "templates/_global/my_account.png", :id => "my_account_btn", :style => "float: right; margin-right: 100px;" %></div>
</div>
图像标签使用 ruby/rails 语法,所以不要注意。它将像任何其他图像标签一样呈现。
这是我正在使用的 jquery:
$('#my_account_btn').click(function () {
$('#toolbar_contents').slideToggle();
});
所以,这实际上在很大程度上是有效的。然而,我的问题是工具栏内容 div 的间距将帐户按钮向下推。当它向上或向下滑动时,它会暂时将自己附加到 div 的底部,然后在完成滑动后跳回(在隐藏的 div 的底部和帐户按钮的顶部之间留有间隙)。
我希望这是有道理的。
谢谢