Không thể tính chiều rộng của một div ẩn

Question

ĐƯỢC GIẢI PHÁP VEGA DƯỚI ĐÂY. HERE IS THE WORKING FIDDLE. Tôi đang giữ toàn bộ bài đăng cho khách truy cập trong tương lai để xem cách giải quyết vấn đề này.

---

Tôi đang cố gắng tạo nút khi được di chuột, hiển thị một số thông tin trên ngăn kéo bên dưới.

Tôi muốn làm cho việc triển khai dễ dàng vào một trang, vì vậy tôi đã biến nó thành một tiện ích jQuery. Tôi muốn điều chỉnh theo nội dung trên nút và/hoặc trên ngăn kéo, nhưng hiện tại nó không hoạt động. Người dùng có thể đặt thẻ div HTML duy nhất với dữ liệu ẩn và nó sẽ hoạt động.

Lý tưởng nhất là chiều rộng nút/ngăn kéo sẽ điều chỉnh theo mức tối đa giữa hai ngăn để ngăn kéo hoàn toàn ẩn khi nó ở trạng thái đóng. Tôi chỉ không muốn người dùng của mình phải gây rối với việc thiết lập chiều rộng cố định.

Tôi cần trợ giúp!

Đây là những gì nó sẽ giống như sau:

HTML liên quan (HTML đầy đủ trong Fiddle):

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

CSS liên quan (full CSS trong 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; 

} 

liên quan jQuery (full jQuery trong 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"); 
    }); 
}); 

Answer 1

Bạn có để tính toán chiều rộng dựa trên this nút. Xem dưới đây,

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

Và đó sẽ nhận được kích thước cuối cùng của đối tượng cộng với giá trị của nội dung ngon bên trong.