CSS: нет ширины DIV, когда отображение не установлено

Question

Я нахожусь в процессе создания выпадающего виджета.Меню, развертываемое вниз, имеет ту же ширину, что и родительский (с использованием jQuery).

Виджет работает должным образом, пока, однако, вы не поместите его в контейнер DIV с начальным отображением, установленным на none.Когда отображается этот контейнер, все значения раскрывающегося списка в соответствии с jQuery равны нулю ... Если контейнер отображается по умолчанию, все работает.

Надеюсь, моя скрипка лучше проиллюстрирует, что я имею в виду: http://jsfiddle.net/ruFzR/ На панели результатов;верхний выпадающий список находится снаружи контейнера, нижний внутри него.Помимо некоторых очевидных проблем с стилем, ширина не увеличивается.

Answer 1

Вы можете избежать проблемы ширины, вызванной display: none;, используя visibility: hidden;. Используйте visibility: visible;, чтобы сделать его видимым.

Элемент остается в вашем потоке контента (того же размера и т. Д.), Пока он просто невидим.

Answer 2

Если вам нужна ширина чего-то, что скрыто, и вы по какой-то причине не можете его скрыть, вы можете клонировать его, изменить 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();

Answer 3

Из примера я не уверен, в чем проблема ..

Но вы должны установить ( в этом примере ) с

.splitButton2 > div{width:100%;}

Этоэквивалентно написанному вами коду jQuery, не имеет недостатков ( ширина равна 0, если элемент равен display:none, зависимость javascript ) и проще в браузере.

Answer 4

Если вы собираетесь использовать display:none:, сначала вы должны показать меню, рассчитать ширину, а затем скрыть ее. Кроме того, вы можете скрыть с абсолютным позиционированием, которое должно правильно сообщать ширину, так как элемент был нарисован. Пример: position: absolute; top: -999em;

Answer 5

.width () обрабатывается браузером, поэтому вместо этого вы получаете «0» с атрибутом

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