-2

私は2つのテキストボックスとボタンを持つ1つのドロップダウンメニューをやっています.iはウェブサイトの上に1つのボタンを持っています. 誰かがそれをクリックすると、div が下にスライドします。divのスライドでそのボタンを削除する方法を知る必要があります....助けてください..

これは、divを下にスライドするための私のjqueryコードです

       $('.link_sign_in').click(function(){

                var left=$('.link_sign_in').position().left;
                var top=$('.link_sign_in').position().top;

                $(".drop_down").css("left",left-235);
                $(".drop_down").css("top",0);
                $('.drop_down').slideDown();

                });

ドロップダウン ボックスを完成させる drop_down の css

.drop_down{
        background-color: #ffffff;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        height: 200px;
        width: 300px;
        z-index:100;
        top :200px;
        left:200px;
        position: absolute;
        border: 2px solid #F8C82A;


        -webkit-box-shadow: 0px 8px 15px rgba(50, 50, 50, 0.5);
        -moz-box-shadow:    0px 8px 15px rgba(50, 50, 50, 0.5);
        box-shadow:         0px 8px 15px rgba(50, 50, 50, 0.5);

        border-top: none;
        }

コード オフ サインイン div

.link_sign_in,.link_sign_up{
        cursor:pointer;
        float:left; 
        width:50px;
        margin-left:5px;
        border: 2px solid #f8c82a;
        padding:5px;
        -webkit-border-bottom-right-radius: 5px;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomright: 5px;
        -moz-border-radius-bottomleft: 5px;
        border-bottom-right-radius: 5px;
        border-bottom-left-radius: 5px;
        border-top: none;

        -webkit-box-shadow: 0px 8px 15px rgba(50, 50, 50, 0.5);
        -moz-box-shadow:    0px 8px 15px rgba(50, 50, 50, 0.5);
        box-shadow:         0px 8px 15px rgba(50, 50, 50, 0.5);
        }
4

1 に答える 1

0

* { position:relative;}CSS ドキュメントの先頭に追加します。これにより、すべてのページ要素が親に対して相対的になり、一部のブラウザーのデフォルトの動作が上書きされます。次に、ボタンが実際に、下にスライドする div とボタンの両方を含むコンテナーの子であることを確認します。次に、left:20px;またはその他の測定値 (必要に応じてtopまたはbottomまたはを使用right) を使用して、必要な場所にボタンを配置します。次に、div を下に「スライド」させたら、ボタンとスライド div を含むコンテナ div にスライドを適用します。そうすれば、ボタンとdivの両方が下にスライドし、ボタンはスライドするdivに対して必要な位置に留まります。

于 2012-09-27T10:12:56.483 に答える