Разное

Скрыть кнопку html: Методы скрытия элементов веб-страниц / Хабр

01.06.1988

Содержание

Как скрыть-отобразить элемент по щелчку на другом элементе?

Существенным для правильной организации системы «скрыть-показать» элементы является расстояние между управляющим элементом (назовём его Кнопкой) и отображаемым элементом (назовём его Целью). Расстояние это может быть представлено в трёх вариантах:

  1. элементы находятся в подчинении (Цель вложена в Кнопку)
  2. элементы находятся в подчинении общего родителя
  3. элементы НЕ имеют общего родителя

Единственно правильная, простая и надёжная схема скрытия-отображения заключается в изменении класса родительского элемента Цели. Если рассмотреть структуру отображения в этом ключе, окажется что существенно разных варианта всего два: важно лишь, имеет ли Кнопка доступ к родительскому элементу Цели. В первом варианте сама Кнопка является этим родителем; во втором варианте у обоих элементов общий родитель; в обоих случаях доступ к родителю есть – по действию пользователя (щелчку мышью) мы просто меняем класс Кнопки либо класс parentNode

Кнопки:

В третьем варианте Кнопка расположена чёрт знает как далеко от Цели, и у нас проблемы:

Как на javascript узнать, какая из Целей связана с данной Кнопкой? Самый простой вариант, который приходит в голову, – при генерации HTML страницы создавать идентификаторы, которые присваивать в виде id Целям и в виде какого-нибудь «левого», ненужного атрибута – Кнопкам. Так все обычно и делают. И так делают, даже когда идентификаторы вовсе не нужны.

Мы же поступаем полностью противоположным способом – всячески избегаем «навязчивых» атрибутов, даже когда они, казалось бы, нужны. В нашем случае решение приходит неизбежно, как паровоз по рельсам: если что-то нельзя соединить в

DOM естественным образом при генерации на сервере, значит этого вовсе не нужно делать. Если нельзя создать на сервере Кнопки, соединённые с целями, значит Кнопки вовсе не нужно генерировать на Сервере – их нужно генерировать в самом javascript.

Все отображаемые и скрываемые Цели находятся в одном контейнере (назовём его Каталог). После загрузки страницы нам нужно подготовить элементы Каталога к определённым действиям пользователя (например, что-то делать с ними по щелчку мыши или при наведении мыши). Вот во время этой подготовки, когда мы получаем элементы Каталога в цикле, мы и будем генерировать элементы, управляющие отображением (наши Кнопки).

И в этот момент нет ничего легче, чем присвоить текущей Кнопке javascript-свойство – ссылку на элемент-Цель:

while (i —) { el = list[i] if (hasClass(el.className, ‘item’)) { currhead = h.appendChild(div.cloneNode(true)) //генерируем Кнопку currhead.Element = el //это наша ссылка на контейнер Цели – элемент Каталога currhead.onclick = showForeign /* … */ } }

Логика скрытия-отображения на CSS

Пусть, например, у нас управляющий элемент Кнопка (по которому кликаем) и скрытый элемент Цель находятся в одном общем контейнере (элементе Каталога). Тогда (по щелчку) надо менять класс контейнера, а в CSS описать, что должен делать этот изменённый класс. Пусть по умолчанию класс контейнера будет ‘hidechild’, и мы запишем в правилах CSS, что он должен запрещать отображение элементов с классом ‘body’:

.hidechild .body {display:none;}

При загрузке страницы все элементы с классом ‘body’ не будут видны на странице. По щелчку на управляющем элементе ‘head’ мы просто будем убирать (или добавлять) этот класс ‘hidechild’ родительскому контейнеру. Вот вкратце и вся логика. Она немного усложнится, если мы хотим создавать вложенные друг в друга контейнеры. Во всех случаях, для надёжности лучше не просто убирать «скрывающий потомков» класс, а ещё и добавлять «отображающий» класс – это упростит взаимоотношение нашей системы отображения с другими правилами CSS:

function showForeign() { var pare = this.Element; if (hasClass(pare.className, ‘hidechild’)) pare.className = ‘item showchild’; else pare.className = ‘item hidechild’; }

В случае, например, вложенности элементов-контейнеров друг в друга, логику отображения нижележащего элемента можно будет реализовать так:

.hidechild .showchild .body {display:inherit;}

– то есть Цель текущего контейнера может быть скрыта, а вложенного контейнера – показана; их отображение будет зависеть только от класса непосредственного родителя (но не от более далёких предков).

Защита от параноиков

Правильнее здесь было бы сказать, «удобства для параноиков», потому что я и сам параноик – хожу по незнакомым сайтам исключительно с включённым NoScript, то есть с отключенным по умолчанию javascript. В такой ситуации, зайдя на страницу нашего примера, я вообще не смогу увидеть содержимое контейнеров (‘body’), а буду видеть лишь кнопки, по которым щёлкать с отключенным javascript бесполезно.

Это неправильно. Ведь скрываем мы часть содержимого для удобства пользователей – чтобы большое количество текста (и рисунков) не загромождало страницу, а пользователи могли бы видеть избранное, то, что нужно. Если же содержимым вообще невозможно управлять (скрывать-отображать по желанию пользователя), логичнее всё-таки отобразить всё, а не скрыть всё. Будет менее удобно, чем с управляющими кнопками, но не фатально (а «скрыть всё» – фатально).

Для обеспечения такой логики (без javascript показывать всё) нужно будет использовать ещё один, вышележащий контейнер. С учётом того, что наши каталоги – не единственное, что на нашем сайте требует javascript, разумно выбрать в этом случае в качестве управляющего контенера самый верхний элемент –

body. Логика защиты проста:

  1. Назначаем на сервере элементу body класс nojs.
  2. При начале работы javascript (если он вообще начнёт работать), в одной из первых, инициализирующих функций, меняем класс body на js.
  3. В те правила CSS, которые в дальнейшем предполагается меняють с помощью javascript, добавляем вперёд лишний селектор – .js:

.js .hidechild .body {display:none;} .js .showchild .hidechild .body {display:none;}

Таким образом, если javascript отключён, никто не поменяет класс body на js, и правила display:none; вообще не будут срабатывать (все элементы страницы будут сразу видны при загрузке).

Вот рабочий пример, иллюстрирующий скрытие-отображение элементов, генерацию кнопок (во втором случае) и удобства для параноиков: hidechild.html

Дилетант

Показать/скрыть блок при нажатии на кнопку через js • фриланс-работа для специалиста • категория Javascript ≡ Заказчик Сергей Паламарчук

6 из 6

проект завершен

  1. публикация

  2. прием ставок

  3. утверждение условий

  4. резервирование

  5. выполнение проекта

  6. проект завершен


На одной странице выводится, допустим, 10 товаров с краткими характеристиками. Каждый товар имеет видимую часть — описание и скрытую часть. Список товаров имеет следующую структуру:

<div>

   <div>Основная информация о товаре</div>

   <button type=»button» title=»Подробнее»>Подробнее</button>

   <div>Скрытая информация о товаре</div>

</div>

————————— Еще блоки товаров ———————————————-

<div>

   <div>Основная информация о товаре</div>

   <button type=»button» title=»Подробнее»>Подробнее</button>

   <div>Скрытая информация о товаре</div>

</div>

Что необходимо реализовать?

Под каждым блоком товара есть кнопка «Подробнее». При нажатии на эту кнопку, скрытая часть описания конкретного товара появляется (класс dopinfofalse меняется на dopinfoactive). Вид кнопки при этом тоже меняется (нужно менять класс buttfalse на buttactive). После повторного нажатия на кнопку вид блока и кнопки возвращаются в исходный вид. Каждый такой блок и каждая кнопка имеет свой уникальный id (например dopinfo25, где число 25 – код товара).

Если для реализации задачи нужно добавить еще какой-то html – не проблема. Может есть менее замороченный способ решения задачи, готов выслушать.

Отзыв заказчика о сотрудничестве с Даниилом Циомой

Показать/скрыть блок при нажатии на кнопку через js

Качество

Профессионализм

Стоимость

Контактность

Сроки


Работа выполнена оперативно.

Показать/скрыть блок при нажатии на кнопку через js

Оплата

Постановка задачи

Четкость требований

Контактность


  • Ставки 10
  • Обсуждение 3

дата онлайн рейтинг стоимость время выполнения


  1. Победившая ставка1 день200 UAH

    Победившая ставка1 день200 UAH

    Здравствуйте, готов добавить блок прямо сейчас.
    Жду вашего ответа.

  2. 1 день200 UAH

    1 день200 UAH

    Здравствуйте.

    Готов сделать Ваш заказ. Подробнее в лс.
    Буду рад сотрудничеству.

    Обращайтесь.

  3.  фрилансер больше не работает на сервисе

  4. 1 день200 UAH

    1 день200 UAH

    Здравствуйте, без проблем готов написать код который будет показывать/скрывать элемент при нажатии.

  5.  фрилансер больше не работает на сервисе

  6. 3185″ data-days=»1″ data-lastactivity=»1639655161″>

     фрилансер больше не работает на сервисе

  7. 1 день150 UAH

    1 день150 UAH

    Добрый вечер, Сергей. Готов написать скрипт, у меня большой опыт с JS. Пишите, обсудим детали.

  8. ставка скрыта фрилансером

  9. ставка скрыта фрилансером

  10.  фрилансер больше не работает на сервисе


2 года назад

156 просмотров

Отображение элементов.

Утилиты · Bootstrap. Версия v4.0.0
  • Как это устроено
  • Обозначение
  • Примеры
  • Скрытие элементов
  • Отображение при печати

Быстрое и оперативное переключение отображаемых элементов и многого другого с помощью наших служебных программ отображения. Включает поддержку некоторых более общих значений, а также некоторые дополнительные функции для управления отображением при печати.

Как это устроено

Изменяйте значение свойства display с помощью наших обычных отзывчивых классов отображения. Мы намеренно поддерживаем только поднабор всех возможных значений свойства display. Классы можно комбинировать для создания различных эффектов, как вам надо.

Обозначение

Классы отображения, которые подходят всем брейкпойнтам, от xs до xl, не имеют в своем названии аббревиатуры брейкпойнта, т. к. эти классы применяются, начиная от min-width: 0; и выше, и т.о., не «связаны» медиа-запросами. Оставшиеся брейкпойнты, однако, включают подобные аббревиатуры брейкпойнта.

Поэтому классы называются по формату:

  • .d-{value} для xs
  • .d-{breakpoint}-{value} для sm, md, lg и xl.

Где значение – это одно из:

  • none
  • inline
  • inline-block
  • block
  • table
  • table-cell
  • table-row
  • flex
  • inline-flex

Медиа-запросы влияют на ширину экрана, начиная с указаннного брейкпонта или больше. Например, .d-lg-none задает display: none; на обоих lg и xl.

Примеры

d-inline

d-inline

<div>d-inline</div>
<div>d-inline</div>

d-block d-block 

<span>d-block</span>
<span>d-block</span>

Скрытие элементов

Для быстрой мобил-френдли веб-разработки используйте отзывчивые классы для показа и скрытия элементов на устройстве. Избегайте создания совершенно разных версий сайта, вместо того, чтобы просто «отзывчиво» прятать элемент для каждого размера экрана.

Чтобы скрыть элементы, используйте класс .d-none или один из классов .d-{sm,md,lg,xl}-none.

Для показа элемента только на определенном инвервале размеров экрана вы можете сочетать один класс .d-*-none с классом .d-*-*, например .d-none .d-md-block .d-xl-none скроет элемент на всех размерах экрана, кроме средних и больших.

Размер экрана Класс
Скрыт на всех .d-none
Скрыт только на xs .d-none .d-sm-block
Скрыт только на sm .d-sm-none .d-md-block
Скрыт только на md .d-md-none .d-lg-block
Скрыт только на lg .d-lg-none .d-xl-block
Скрыт только на xl .d-xl-none
Виден на всех .d-block
Виден только на xs .d-block .d-sm-none
Виден только на sm .d-none .d-sm-block .d-md-none
Виден только на md . d-none .d-md-block .d-lg-none
Виден только на lg .d-none .d-lg-block .d-xl-none
Виден только на xl .d-none .d-xl-block

Скрыто на экранах шире lg

Скрыто на экранах меньше lg

<div>Скрыто на экранах шире lg</div>
<div>Скрыто на экранах меньше lg</div>

Отображение при печати

Измените атрибут display элементов при печати с помощью наших классов. Сюда входит поддержка таких же значений display, как в наших отзывчивых классах .d-*.

  • .d-print-none
  • .d-print-inline
  • .d-print-inline-block
  • .d-print-block
  • .d-print-table
  • .d-print-table-row
  • . d-print-table-cell
  • .d-print-flex
  • .d-print-inline-flex

Классы печати и отображения можно сочетать.

Только экран (Скрыто только для печати)

Только печать (Скрыто только на экране)

Скрыть до больших экранов, но всегда отображается для печати

<div>Только экран (Скрыто только для печати)</div>
<div>Только печать (Скрыто только на экране)</div>
<div>Скрыть до больших экранов, но всегда отображается для печати</div>

Please enable JavaScript to view the comments powered by Disqus.

Отображение и скрытие содержимого — Компоненты

Кнопка, позволяющая отображать или скрывать содержимое, называется раскрытием. Существует несколько способов сделать такие компоненты доступными.

Что такое раскрытие информации?

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

Некоторые примеры:

  • Часто задаваемые вопросы, где каждый вопрос представляет собой кнопку, которая показывает или скрывает ответ.

  • Гамбургер-меню в мобильном окне просмотра, часто визуализируемое тремя горизонтальными полосами:

  • Выпадающее меню:

Как сделать доступное раскрытие информации

  • Поместите расширяемый контент сразу после кнопки в исходном коде
  • Скрыть содержимое с помощью display:none
  • Информировать пользователей вспомогательных технологий о статусе кнопки развертывания/свертывания

Заказ исходного кода

Когда дело доходит до визуального дизайна, содержимое кнопки раскрытия обычно размещается под кнопкой или рядом с ней. Что касается исходного кода, то контент иногда неправомерно размещается перед кнопкой или намного ниже. Это вызывает проблемы у пользователей, которые не видят свой экран.

Порядок исходного кода должен быть правильным при создании компонента раскрытия: начните с кнопки, которая показывает/скрывает содержимое, затем добавьте сворачиваемое содержимое.

Скрытие с помощью display:none

Когда часть содержимого визуально скрыта, она должна быть скрыта от всех. Используйте display: none , чтобы скрыть содержимое. Таким образом, он будет невидим как для пользователей программ чтения с экрана, так и для пользователей клавиатуры, которые не могут просматривать скрытый контент с помощью табуляции.

Доступные индикаторы состояния

Визуальные индикаторы, такие как стрелки, обычно используются для обозначения кнопки как расширяемой/сворачиваемой. Этот индикатор состояния подразумевает действие. Тот, у кого нет визуального обзора своего экрана, не знает, что эта кнопка будет расширяться/сворачиваться при использовании. Текущее состояние блока контента (видимое или скрытое) также неясно. Есть несколько способов решить эту проблему.

Изменить метку кнопки

Изменить метку кнопки, чтобы указать, какое действие она будет выполнять. Например, значок гамбургера, ведущий к сворачиваемому меню, обычно имеет метку, сообщающую, что кнопка будет отображать меню при активации:

 
Мультяшное меню

Когда меню отображается, измените метку кнопки на «скрыть меню».

Не всегда легко подобрать правильную формулировку, особенно если речь идет о многоязычных веб-сайтах.

С подробностями
и сводкой Как это работает?

Это довольно просто.

 <подробности>
Как это работает?

Это довольно просто.

На основе этого HTML-кода большинство браузеров правильно заполняют дерево специальных возможностей, поэтому программы чтения с экрана могут объявить текущую роль и состояние компонента.

С
aria-expanded

ARIA также является опцией. Взгляните на практику разработки компонента «показать-скрыть», чтобы увидеть, как это делается.

Пример
  • В отличие от методики с использованием деталей и сводок , вы должны предоставить свой собственный сценарий для отображения/скрытия содержимого.
  • Атрибут aria-expanded передает состояние блока контента в дерево доступности. Aria-expanded=»true» означает, что контент виден. Aria-expanded=»false» означает, что содержимое в настоящее время скрыто. Всегда синхронизируйте значение этого атрибута с визуальным состоянием компонента . Программы чтения с экрана объявят об этом состоянии, когда кнопка получит фокус.
  • Добавьте aria-expanded атрибут к кнопке, которая переключает видимость вместо контейнера скрытого/показанного содержимого .
  • Убедитесь, что атрибут aria-expanded имеет правильное значение при загрузке страницы . Не добавляйте его просто при изменении состояния компонента.
  • Используйте нейтральную метку кнопки при применении этого метода, например, «меню» вместо «показать меню» или «скрыть меню». Метка остается нейтральной, в то время как aria-expanded указывает на состояние.
  • Пример кода также содержит атрибут aria-controls . Этот атрибут сообщает вспомогательным технологиям, каким контентом управляет кнопка. Поскольку aria-controls обычно располагается сразу после кнопки в исходном коде раскрытия информации, этот атрибут является необязательным.

Свернуть · Начальная загрузка

Переключите видимость контента в вашем проекте с помощью нескольких классов и наших подключаемых модулей JavaScript.

Пример

Нажмите кнопки ниже, чтобы показать или скрыть другой элемент с помощью изменения класса:

  • . collapse скрывает содержимое
  • .collapsing применяется во время переходов
  • .collapse.show показывает содержимое

Вы можете использовать ссылку с атрибут href или кнопка с атрибутом data-target . В обоих случаях требуется data-toggle="collapse" .

Ссылка с href

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident.

Несколько целей

<дел> <дел> <дел> <дел> Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus Terry Richardson ad Squid. Nihil anim keffiyeh Helvetica, ремесленное пиво Labore Wes Anderson cred nesciunt sapiente ea proident.