0

我正在尝试在我的网站顶部创建一个工具栏类型部分。我只需要一个默认隐藏的 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 的底部和帐户按钮的顶部之间留有间隙）。

我希望这是有道理的。

谢谢

4

3 回答 3

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 这将阻止您下方的按钮向上/向下移动。我测试了这段代码，它可以工作。

于 2012-10-12T02:24:17.213 回答
0

尝试删除display:none并改为在您的文档加载上运行 .hide() 。以下是适用于我的网站的代码。

$(document).ready(function() {
$('#toolbar_contents').hide();
  $('#my_account_btn').click(function() {
    $('#toolbar_contents').slideToggle(400);
    return false;
  });
});
于 2012-10-12T02:25:46.740 回答
0

好的，各位大佬给点思路，谢谢！

最终修复它的是将底部 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 出现在哪里。

不管怎样，再次感谢各位！

于 2012-10-12T03:33:54.543 回答