0

サイトの上部にツールバータイプのセクションを作成しようとしています。デフォルトで非表示になるdivが1つと、その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の下部とアカウントボタンの上部の間にギャップが残ります）。

それが理にかなっていることを願っています。

ありがとう

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 に答える