Как в css убрать display:none?
Добрый вечер. Не могу понять, как убрать display:none, ставится по умолчанию и скрывает боковое меню. Вроде css знаю немного, но что то не могу решить проблему. На фото видно, прописывается стиль к ul, в «исследовать элемент» убираю галочку у display:none, меню появляется.
Забыл добавить, меню выводится динамически, с помощью виджета yii2. Может это поможет как то.
- Вопрос задан более трёх лет назад
- 1424 просмотра
Комментировать
Решения вопроса 3
iBird Rose @iiiBird Куратор тега CSS
Пока ты спишь — твой конкурент совершенствуется
значит скрывается из js. либо какой-нить hide() пишешь, либо еще что-то.
Ответ написан более трёх лет назад
Нравится 2 6 комментариев
Historian111 @Historian111 Автор вопроса
Да в том то и дело, что в скриптах только accordion и кукки для него, и скрипт с подключением этого accordion-а. Может Yii2 что нибудь вешает. Бутстраповские файлы подключены
iBird Rose @iiiBird Куратор тега CSS
Historian111, ну если не хочешь разбираться пропиши в css «display: block !important;» для этого ul
Свойства CSS display и visibility: как скрыть элемент CSS или элемент HTML?
Свойства display и visibility используются, чтобы вывести или скрыть элемент HTML или CSS. Но тогда какая между ними разница? Чтобы понять это, посмотрите на приведенный ниже рисунок, здесь я использовал три элемента div :
Мы используем три элемента div , которые показаны в разделе 1 ( с левой стороны ). Изначально все элементы div выводятся без применения свойств display или visibility .
Обновлено: 2021-10-12 14:57:55 Вадим Дворников автор материала
Посмотреть онлайн демо-версию и код
Во второй части рисунка отображаются только div 1 и div 3 . Для div 2 задано visibility: hidden , но мы все равно видим пространство, которое занимает этот элемент.
Посмотреть онлайн демо-версию и код
В третьем разделе также отображаются только div 1 и div 3 , в то время как div 2 скрыт с помощью свойства HTML display none . Можно увидеть разницу: div 3 смещается вверх и для div 2 больше не отводится пространство.
Посмотреть онлайн демо-версию и код
Синтаксис свойства CSS visibility
Вот, как использовать свойство CSS visibility :
visibility: hidden;
Значение по умолчанию для свойства CSS visibility — visible . Также можно использовать:
visibility: collapse;
Данное значение используется в HTML-таблицах .
Синтаксис свойства CSS display
display: none;
Это позволяет скрыть элемент, для которого задано значение данного свойства. Именно его я применил для раздела 3 в приведенном выше примере.
Свойство HTML display также используется, чтобы изменить поведение строчных или блочных элементов:
display: inline;
Этот код задает для блочного элемента поведение строчного. Например, div представляет собой блочный элемент. Применив к нему display: inline , мы задаем для него поведение строчного элемента:
display: block;
Значение block делает противоположное. Например, элемент span является строчным. Если мы применим к нему display: block , он будет вести себя как блочный элемент.
Пример применения свойства display для отображения / скрытия меню
-
, элементы списка и гиперссылки. Ссылки представляют собой пункты меню.
Для разработки этого меню использовался ряд других свойств CSS . Свойство display изначально задано не было. Это означает, что меню будет отображаться.
При клике по ссылке скрыть меню для события клика используется код JQuery , чтобы применить свойство display: none к родительскому элементу div :
Посмотреть онлайн демо-версию и код
Если после этого вы нажмете на ссылку показать меню, код jQuery добавит значение display: initial . Это сделает меню видимым, а ссылки сместятся вниз.
Демо-версия меню с использованием свойства visibility
Я использую тот же пример, что и выше, но на этот раз применю свойство CSS visibility , чтобы показать и скрыть меню. Разница заключается в используемом коде jQuery :
visibility: hidden
При нажатии на ссылку скрыть меню, меню скрывается. При клике по ссылке показать меню, добавляется свойство visibility: visible , и меню снова отображается:
Посмотреть онлайн демо-версию и код
В этом примере можно увидеть разницу. Когда нажимается ссылка скрыть меню, меню исчезает. При клике по ссылке показать меню, оно вновь становится видимым. Но ссылки при этом остаются на своих местах и не смещаются ( в отличие от HTML display ).
Пример использования свойства CSS visibility для HTML-таблицы
В следующем примере мы создадим HTML-таблицу с помощью фреймворка Bootstrap . Таблица содержит пять строк, которые первоначально отображаются. На данном этапе таблица выглядит следующим образом:
Посмотреть онлайн демо-версию и код
Для строк таблицы использованы разные классы, чтобы задать их стили. Например, danger , active , warning и т.д. Строки таблицы пронумерованы от 1 до 5 ( первый столбец слева ).
Теперь я использую свойство visibility для второй строки, чтобы скрыть ее. Это делается следующим образом:
visibility: collapse;
Таким образом значение collapse также используется для элементов таблицы. Оно применяется для удаления строки, при этом структура таблицы не изменяется. Посмотрите на приведенный ниже рисунок и на код демо-версии:
Посмотреть онлайн демо-версию и код
Вторая строка не видна, но структура таблицы остается неизменной. Если вы используете значение collapse для любых других элементов, оно будет работать, как значение hidden .
Применение свойства CSS display к таблице
Теперь тот же самый пример, за исключением того, что я буду использовать свойство HTML display , чтобы скрыть строку в таблице:
Посмотреть онлайн демо-версию и код
Вторая строка исчезла, а третья строка перемещается вверх, чтобы занять ее место.
Использование display для строчных элементов
Свойство CSS display также используется для изменения поведения строчных и блочных элементов.
Напомню, что блочные элементы занимают все доступное им пространство и начинаются с новой строки. Например, абзацы или блоки div — это блочные элементы.
Строчные элементы занимают только необходимое для отображения пространство и не начинаются с новой строки. В качестве примеров строчных элементов можно привести span , тег ссылки и т.д.
Свойство HTML display позволяет изменять поведение строчных и блочных элементов.
Чтобы изменить поведение блочного элемента на поведение строчного:
display: inline;
Чтобы изменить поведение строчного элемента на поведение блочного:
display: block;
В следующем примере поведение элемента span изменяется на поведение блочного элемента. А поведение абзаца с помощью свойства CSS display изменяется на поведение строчного элемента.
Чтобы понять, в чем заключается разница, сначала посмотрите на приведенный ниже рисунок и исходный код, в котором свойство HTML display еще не применено:
Посмотреть онлайн демо-версию и код
На странице демо-версии отображен родительский div , а внутри него span и абзац. Изначально их поведение является стандартным для этих элементов:
- Родительский div очерчен черной рамкой и занимает всю доступную ширину;
- span очерчен синей рамкой, внутри div он занимает только необходимое для отображения пространство и начинается с той же самой строки;
- Абзац, который очерчен красной рамкой, также занимает все доступное пространство и начинается с новой строки.
Теперь с помощью HTML display block я изменю поведение span на поведение блочного элемента, а поведение абзаца на поведение строчного. Родительский div остается без изменений. Смотрите результат и демо-версию:
Посмотреть онлайн демо-версию и код
span начинается с новой строки и границы абзаца заканчивается там, где заканчивается его текст. Он не занимает всю доступную ширину, как div или span .
Как в css отменить ‘display: none’?
Делаю свой микро-css фреймворк. Нужно что-бы при определенном размере экрана — блок исчезал, а при другом — появлялся.
.xsmall-hidden < display: none; >.xsmall-visible
Только вот элемент может быть table, block, block, block-inline и тд. Можно это сделать просто и красиво?
Благодарю за помощь
- Вопрос задан более трёх лет назад
- 17784 просмотра
Комментировать
Решения вопроса 3
iBird Rose @iiiBird Куратор тега CSS
Пока ты спишь — твой конкурент совершенствуется
.xsmall-visible < display: block; >table.xsmall-visibles < display: table; >tr.xsmall-visible < display: table-row; >th.xsmall-visible, td.xsmall-visible
ну логику я надеюсь ты понял
Ответ написан более трёх лет назад
Комментировать
Нравится 4 Комментировать
Сергей delphinpro @delphinpro Куратор тега CSS
frontend developer
Просто и красиво сделать можно (будет в будущем)
А пока что IE про это значение не знает caniuse.com/#feat=css-initial-value
Ответ написан более трёх лет назад
Комментировать
Нравится 3 Комментировать
block или inline-block, в зависимости от назначения блока, если он должен иметь строчное поведение, то inline-block
Display none css как отменить
Здесь могла бы быть ваша реклама
Покинул форум
Сообщений всего: 4574
Дата рег-ции: Июль 2006
Откуда: Israel
Помог: 3 раз(а)
Секрет
Теперь, когда вы уже наверняка второпях отправили свой запрос,
я расскажу вам простой секрет, который сэкономит вам уйму ожиданий,
даже если первый ответ по теме последуем сразу же.
Само собой я знаю что ответят мне тут же, и если я посмотрю
на сообщения на форуме, то пойму что в общем то я и не ошибаюсь.
Но еще я точно замечу, что очень мало тем, в которых всего два ответа :
вопрос автора и еще два сообщение вида Ответ + Спасибо
После этого приходится начинать уточнять этим неграмотным что мне надо.
Они что, сами читать не умеют? А уточнять приходится.
И иногда пока они переварят то что я им скажу проходит и не одна ночь..
Уверен что если бы я им сказал что у меня есть
фиолетовый квадрат, и нужно превратить его в синий треугольник
и я пытался взять кисточку, макнуть в банку и поводить ей по квадрату
но почему то кисточка не принимала цвет краски в банке,
то на мой вопрос — где взять правильные банки мне бы ответили гораздо быстрее
предложив её открыть, а не тратить еще стольник на жестянку.
Поэтому с тех пор я строю свои вопросы по проверенной давным давно схеме:
Что есть
Что нужно получить
Как я пытался
Почему или что у меня не получилось.
На последок как оно происходит на форумах
Цитата:
Новичок: Подскажите пожалуста самый крепкий сорт дерева! Весь инет перерыл, поиском пользовался!
Старожил: Объясни, зачем тебе понадобилось дерево? Сейчас оно в строительстве практически не используется.
Новичок: Я небоскрёб собираюсь строить. Хочу узнать, из какого дерева делать перекрытия между этажами!
Старожил: Какое дерево? Ты вообще соображаешь, что говоришь?
Новичок: Чем мне нравиться этот форум — из двух ответов ниодного конкретного. Одни вопросы неподелу!
Старожил: Не нравится — тебя здесь никто не держит. Но если ты не соображаешь, что из дерева небоскрёбы не строят, то лучше бы тебе сначала школу закончить.
Новичок: Не знаите — лучше молчите! У меня дедушка в деревянном доме живёт! У НЕГО НИЧЕГО НЕ ЛОМАЕТСЯ.
Но у него дом из сосны, а я понимаю, что для небоскрёба нужно дерево прочнее! Поэтому и спрашиваю. А от вас нормального ответа недождёшся.
Прохожий: Самое крепкое дерево — дуб. Вот тебе технология вымачивания дуба в солёной воде, она придаёт дубу особую прочность:
Новичок: Спасибо, братан! То что нужно.
Отредактировано модератором: Uchkuma, 26 Апреля, 2011 — 10:21:12