Убирать модификаторы скрытия, а не добавлять модификаторы показа
Вот представим. Вы верстаете. И есть штука, которая должна показаться/скрываться по клику на какой-либо элемент. Не модалка, а клик-подсказки или кнопка-меню.
Конструкция, упрощённо (но обязательно с aria-атрибутами!), такая:
<!-- контрол --><button class="ui-button" type="button" id="ui-menu" aria-haspopup="true" aria-expanded="false"> Добавить в...</button><!-- нечто, что реагирует на действие с контролом. и оно скрыто--><ul class="ui-menu is-hidden" aria-labelledby="ui-menu"> Меню с пунктами...</ul>
<!-- контрол -->
<button class="ui-button"
type="button"
id="ui-menu"
aria-haspopup="true"
aria-expanded="false">
Добавить в...
</button>
<!--
нечто, что реагирует на действие
с контролом. и оно скрыто
-->
<ul class="ui-menu is-hidden"
aria-labelledby="ui-menu">
Меню с пунктами...
</ul>
И вот самое важное как раз в классе is-hidden.
Исходим всегда из того, что в начальном состоянии элемент всегда скрыт. А действие с контролом — его показывает.
Нужно удалять модификатор скрытия, а не добавлять модификатор показа.
$(document).ready(function(){ $('.ui-button') .on('click', function () { $('.ui-menu') .removeClass('is-hidden'); });});
$(document).ready(function()
{
$('.ui-button')
.on('click', function ()
{
$('.ui-menu')
.removeClass('is-hidden');
});
});
Разметка — чище. Из разметки сразу понятно базовое состояние «всё скрыто». Проще дебажить.
Стили также пишутся исходя из мысли, что элемент всегда виден, а модификатор — скрывает. С анимацией там или ещё с чем угодно.
.ui-menu { opacity: 1; visibility: visible; // скрывалка &.is-hidden { opacity: 0; visibility: hidden; }}
.ui-menu {
opacity: 1;
visibility: visible;
// скрывалка
&.is-hidden {
opacity: 0;
visibility: hidden;
}
}