jquery中的滑动div

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

所以，这实际上在很大程度上是有效的。然而，我的问题是工具栏内容div的间距会向下推account按钮。当它向上或向下滑动时，它会临时连接到div的底部，然后在滑动完成后向下跳（在隐藏div的底部和account按钮的顶部之间留下一个间隙）

我希望这是有道理的

---

这是因为您没有指定某些元素的宽度，您可以应用浮动以使其保持完整。试着了解这个想法

<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>

#帐户工具栏{
宽度：500px；
}
.工具栏\u内容\u包装{
浮动：左；
宽度：400px；
高度：100px；
}
#钮扣{
浮动：左；
宽度：300px；
}
.清楚{
明确：两者皆有；
}
这是迄今为止的帐户工具栏
$（函数（）{
$（'#我的帐户''u btn'）。单击（函数（）{
$（“#工具栏_内容”）.slideToggle（）；
});
});

---

请注意.toolbar\u contents\u包装，这将阻止下面的按钮向上/向下移动。我测试了这段代码，它运行正常。

尝试删除

display:none

，然后在文档加载时运行.hide（）。下面是在我的网站上运行的代码

$(document).ready(function() {
$('#toolbar_contents').hide();
  $('#my_account_btn').click(function() {
    $('#toolbar_contents').slideToggle(400);
    return false;
  });
});

---

好的，你们给了我一些想法，谢谢

最终修复它的是将底部div（拿着图像/按钮的那一个）设置为按钮的高度。在此之前，div未显示，并且在浏览器中的最终高度为0px

<div id="account_toolbar" style="background-color:#fff;">
  <div id="toolbar_contents" style="">  This is the account toolbar so far
  </div>
  <div id="button" style="background-color: #ff0000; height:59px;"><%= image_tag "templates/_global/my_account.png", :id => "my_account_btn", :style => "float: right; margin-right: 100px;" %></div>
</div>

这是迄今为止的帐户工具栏
“我的账户”，：style=>“浮动：右；保证金右：100px；”%>

红色的样式背景色以前根本没有显示出来。我暂时把它放在那里，看演员们出现在哪里

---

无论如何，再次感谢各位

我需要按钮直接位于工具栏的下方，而不是右侧。我尝试在div上添加100%的宽度，但没有修复任何问题。谢谢你的回复。我更新了代码以便按钮不会上下移动。我已经测试过了，而且很有效。不幸的是，这也起到了同样的作用。我可能没有很好地解释，但是最上面的div有应该隐藏的工具栏内容。底部的div仅用于按住按钮。也许有更好的方法可以做到这一点。。我就是想不出一个。谢谢你的帮助！

<div id="account_toolbar" style="background-color:#fff;">
  <div id="toolbar_contents" style="">  This is the account toolbar so far
  </div>
  <div id="button" style="background-color: #ff0000; height:59px;"><%= image_tag "templates/_global/my_account.png", :id => "my_account_btn", :style => "float: right; margin-right: 100px;" %></div>
</div>