无法计算隐藏div的宽度

Question

由VEGA BELOW解决。 HERE IS THE WORKING FIDDLE. 我将保留整个帖子，以便将来访问者了解此问题是如何解决的。

---

我正在尝试创建一个按钮，当它悬停时，会在下方的抽屉上显示一些信息。

我希望能够轻松实现到页面中，因此我将其转换为jQuery小部件。我想根据按钮和/或抽屉上的内容进行调整，但现在没有这样做。用户应该可以将单个HTML div标签放在隐藏的数据，它只会工作。

理想情况下，按钮/抽屉宽度将调整到两者之间的最大值，以便抽屉在处于关闭状态时完全隐藏。我只是不希望我的用户不得不设置一个固定的宽度。

我需要帮助！

这就是它的样子：

相关HTML（Fiddle中的完整HTML）：

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

相关CSS（Fiddle中的完整CSS）：

.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（Fiddle中的完整jQuery）：

$(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");
    });
});

Answer 1

您必须根据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");
    });
});

DEMO： http://jsfiddle.net/dELNa/11/

Answer 2

$(".download").mouseenter(function() {
    totalWidth = 0;
    totalWidth  += $(this).outerWidth(true);
    $(".drawer", this).css("left", totalWidth);
}).mouseleave(function() {
    $(".drawer", this).css("left", "3px");
});

这将获得对象的最终大小加上里面美味内容的值。