CSS：沒有DIV寬度，當顯示設置爲無

我正在製作一個下拉小部件的過程。向下擴展的菜單設置爲與父級相同的寬度（使用jQuery）。CSS：沒有DIV寬度，當顯示設置爲無

小部件按預期工作，直到您將其放置在DIV容器內，並且inital顯示設置爲none。當顯示這個容器時，根據jQuery的所有下拉寬度都是零... 如果容器默認顯示，所有的作品。

希望我的小提琴能夠更好地說明我的意思：http://jsfiddle.net/ruFzR/ 在結果窗格上;頂部的下拉菜單位於容器的外部，即底部的底部。除了一些明顯的造型問題外，寬度還沒有擴大。

來源

2012-03-29 Alex Guerin

這可以用CSS – charlietfl 2012-03-29 23:31:52

是的可以簡單地完成。我不會以這種方式去下拉。至多，我會用js來做動畫，或者顯示/隱藏方法。 – 2012-03-29 23:33:37

您可以使用visibility: hidden;來避免由display: none;引起的寬度問題。使用visibility: visible;使其可見。

元素保持在您的內容流中（相同的大小等），而它只是不可見的。

來源

2012-03-29 23:51:22 Sparky

的.WIDTH（）是由這就是爲什麼你會得到「0」嘗試使用屬性，而不是

$('#elt').attr('width');

來源

2012-03-29 23:30:39

不，屬性寬度未定義... – 2012-03-29 23:37:01

這會回讀'width'屬性，但正如您在他的標記中看到的，他沒有設置一個。 – ehynds 2012-03-29 23:50:33

從我不知道是什麼問題的例子中，瀏覽器處理..

但是，你應該（在這個例子）與

.splitButton2 > div{width:100%;}

這相當於你寫的jQuery代碼進行設置，有沒有缺點（寬度爲0，如果該元素是display:none，JavaScript的依賴），並在瀏覽器更容易..

來源

2012-03-29 23:40:49

如果你打算使用display:none:你必須首先顯示菜單，計算寬度，然後將其隱藏。或者，您可以隱藏絕對定位，因爲該元素已被繪製，所以應該正確報告寬度。示例：position: absolute; top: -999em;

來源

2012-03-29 23:46:56 ehynds

如果您需要隱藏某些東西的寬度，並且無論出於何種原因都無法將其隱藏，則可以克隆它，更改CSS以顯示頁面，使其不可見，然後進行測量。如果用戶隱藏並隨後刪除，用戶將不會更聰明。

實施例：

$itemClone = $('.hidden-item').clone().css({ 
     'visibility': 'hidden', 
     'position': 'absolute', 
     'z-index': '-99999', 
     'left': '99999999px', 
     'top': '0px' 
    }).appendTo('body'); 
var width = $itemClone.width(); 
$itemClone.remove();

來源

2016-10-05 20:48:58 rannmann

CSS：沒有DIV寬度，當顯示設置爲無

回答

相關問題