8

以下のベガによって解決されました。ここに作業フィドルがあります。将来の訪問者がこの問題がどのように解決されたかを確認できるように、投稿全体を保持しています.

ホバーすると、下の引き出しに関する情報が表示されるボタンを作成しようとしています。

簡単にページに実装できるようにしたかったので、jQuery ウィジェットに変えました。ボタンやドロワーの内容に合わせて調整したいのですが、今のところそれができていません。ユーザーは、非表示のデータを含む単一の HTML div タグを配置できる必要があり、それは機能します。

理想的には、ボタン/引き出しの幅を 2 ​​つの間の最大値に調整して、閉じた状態で引き出しが完全に隠れるようにします。ユーザーが固定幅の設定をいじる必要がないようにしたいだけです。

私は助けが必要です！

これは次のようになります。

ここに画像の説明を入力

ここに画像の説明を入力

関連する HTML (完全な HTML in Fiddle ):

<div class="download" data-value="It's awesome!">Visit Website</div>

関連する CSS (完全な CSS in Fiddle ):

.button {
    position:absolute;
    padding:10px;
}

.drawer {
    box-sizing:border-box;
    z-index:-1;
    position:absolute;
    top:3px;
    left:3px;
    padding:6px 10px;
    text-align:center;
    -webkit-transition:0.3s left ease-in;

}

関連する jQuery (完全な jQuery in Fiddle ):

$(function() {
    $(".button").each(function() {
        $(this).append("<div class='drawer'>" +  $(this).data('value') + "<div class='handle'>||</div></div>");
        $(".drawer", this).css("width", $(".button").width());
    });

    $(".button").mouseenter(function() {
        $(".drawer", this).css("left", $(".button").outerWidth());
    }).mouseleave(function() {
        $(".drawer", this).css("left", "3px");
    });
});
4

2 に答える 2

2

thisボタンに基づいて幅を計算する必要があります。下記参照、

$(function() {
    $(".button").each(function() {
        $(this).append("<div class='drawer'>" +  $(this).data('value') + "<div class='handle'>||</div></div>");
        $(".drawer", this).width($(this).width()); //updated with this object
    });

    $(".button").mouseenter(function() {
        $(".drawer", this).css("left", $(this).outerWidth()); //updated with this object
    }).mouseleave(function() {
        $(".drawer", this).css("left", "3px");
    });
});

デモ: http://jsfiddle.net/dELNa/11/

于 2013-02-27T18:51:51.420 に答える
1 
$(".download").mouseenter(function() {
    totalWidth = 0;
    totalWidth  += $(this).outerWidth(true);
    $(".drawer", this).css("left", totalWidth);
}).mouseleave(function() {
    $(".drawer", this).css("left", "3px");
});

これにより、オブジェクトの最終的なサイズに加えて、内部の美味しいコンテンツの値が得られます。

于 2013-02-27T18:52:23.007 に答える