Nie można obliczyć szerokości ukrytego elementu div

Question

ROZWIĄZANE PRZEZ VEGA BELOW. HERE IS THE WORKING FIDDLE. Przechowuję cały wpis dla przyszłych odwiedzających, aby zobaczyć, jak rozwiązano ten problem.

---

Próbuję utworzyć przycisk, który po odsłonięciu ujawnia pewne informacje na temat szuflady znajdującej się pod spodem.

Chciałem ułatwić wdrożenie na stronie, więc zmieniłem go w widget jQuery. Chciałbym go dostosować zgodnie z treścią przycisku i/lub na szufladzie, , ale teraz tego nie robię. Użytkownik powinien mieć możliwość umieszczenia pojedynczego znacznika HTML div z ukrytymi danymi, a to po prostu zadziała.

Idealnie szerokość przycisków/szuflad dostosowałaby się do maksymalnej wartości między nimi, tak aby szuflada była całkowicie ukryta, gdy znajduje się w stanie zamkniętym. Po prostu nie chcę, aby moi użytkownicy musieli mieszać przy ustawianiu stałej szerokości.

Potrzebuję pomocy!

Oto, co to będzie wyglądać następująco:

Danym HTML (pełny HTML w Fiddle):

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

Stosowna CSS (pełna CSS w 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; 

} 

Stosowna jQuery (pełna jQuery w 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

Musisz obliczyć szerokość w oparciu o this przycisku. Zobacz poniżej,

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

I że dostanie ostateczną wielkość obiektu plus wartość pyszne zawartości wewnątrz.