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>

图片代码使用ruby / rails语法，所以不要理会。它将像任何其他图像标记一样呈现。

这是我正在使用的jquery：

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

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

我希望这是有道理的。

感谢

Answer 1

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

<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会阻止您的按钮向上/向下移动。我测试了这段代码并且有效。

Answer 2

尝试删除display:none，而不是在文档加载中运行.hide（）。以下是适用于我网站的代码。

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

Answer 3

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

最终修复它的原因是将底部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>

之前没有显示红色的风格背景颜色。我暂时在那里看到div出现在哪里。

无论如何，再次感谢你们！

在jquery中滑动div

3 个答案: