jquery - 在jquery中滑动div

Question

我想在我的网站顶部制作一个工具栏类型部分。我只需要一个默认隐藏的 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>

image标签使用ruby/rails语法，不用关注。它将像任何其他图像标签一样呈现。

这是我正在使用的 jquery:

$('#my_account_btn').click(function () {
    $('#toolbar_contents').slideToggle();
});

因此，这实际上在大多数情况下都有效。然而，我的问题是工具栏内容 div 所在的间距将帐户按钮向下推。当它向上或向下滑动时，它会暂时将自己附加到 div 的底部，然后在完成滑动后跳回向下(在隐藏的 div 底部和帐户按钮顶部之间留有间隙)。

我希望这是有道理的。

谢谢

Answer 1

这是因为您没有指定某些元素的宽度，您可以应用 float 以使其保持完整。尝试得到这个想法。

<style>
#account_toolbar{
    width:500px;
}
.toolbar_contents_wrapper{
    float:left;
    width:400px;
    height:100px;
}
#button{
    float:left;
    width:300px;
}

.clear{
    clear:both;
}
 </style>


 <div id="account_toolbar" style="background-color:#fff;">
    <div class="toolbar_contents_wrapper">
     <div id="toolbar_contents" style="display:none;">  This is the account toolbar so far
  </div>
</div>
<div class="clear"></div>
<div id="button" style="background-color: #ff0000;"><img    src="#" id="my_account_btn" style="float: right; margin-right: 100px;" /></div>
</div>


<script>
$(function(){
    $('#my_account_btn').click(function () {
    $('#toolbar_contents').slideToggle();
});
});
</script>

请注意 .toolbar_contents_wrapper 这会阻止您下方的按钮向上/向下移动。我测试了这段代码，它有效。