8

由下面的 VEGA 解决。这是工作的小提琴。我将整个帖子保留下来，以供将来的访问者查看此问题是如何解决的。

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

我想让它易于实现到一个页面中，所以我把它变成了一个 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");
    });
});
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 回答