Блог

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

Я добавлял пользовательский JS для добавления «активного» класса при нажатии и удаления при втором нажатии, но по-прежнему хотя бы одна кнопка (недавно нажатая) оставалась выбранной даже без прикрепленного к ней «активного» класса.

Я подготовил пример кода в Codepen.ввод—вывод https://codepen.io/krzysztof-d/pen/rNLqdMv но я обнаружил, что эти кнопки там ведут себя даже по-другому, поскольку они не остаются выбранными, как должны быть по умолчанию, верно?

Пожалуйста, дайте мне знать, чего мне не хватает

 <button type="button" class="btn btn-outline-secondary w-100">1</button>
  

Обновить:

Таким образом, поведение кнопок по умолчанию отличается в зависимости от того, находятся ли они в настольном или мобильном представлении. Вы можете протестировать на примере Codepen — на мобильном устройстве последняя нажатая кнопка остается «выделенной / темной» (с изменением цвета и фокусом вокруг нее), когда в режиме рабочего стола она мгновенно возвращается к белому цвету после ухода мыши.

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

Мои вопросы в том, как сделать так, чтобы такая кнопка снова выглядела нормально (как другие, не выбранные) программно?

Другими словами, кажется, что сделать множественный выбор не проблема, но я хочу разрешить отменить выбор некоторых кнопок, если кто-то допустит ошибку, и именно здесь возникла странная часть. Вот еще одна ссылка на Codepen с тем же примером, в котором некоторые JS добавлены для добавления / удаления активного класса из кнопок — проверьте это в мобильном представлении https://codepen.io/krzysztof-d/pen/OJXBwYm , попробуйте выбрать несколько чисел, а затем отменить выбор одного или двух.

Обновление со скриншотом по запросу — кнопка шесть в мобильном представлении кажется выбранной, но на самом деле она была просто отменена, и class .active был удален из нее.

Прежде всего, вам не нужно писать свой собственный JavaScript для переключения .active класса на кнопках. В Bootstrap есть плагин button, который вы можете использовать:

 <button type="button" class="btn btn-outline-secondary w-100" 
        data-toggle="button" aria-pressed="false">1</button>
  

Это автоматически переключало .active бы класс при выборе / отмене выбора кнопки.

демонстрация jsfiddle: https://jsfiddle.net/davidliang2008/mfqyp8j3/6/

Во-вторых, когда вы выбираете кнопку, происходит 2 вещи. Bootstrap .active добавляет (если вы используете плагин button) и .focus класс:

• .active : дает вам тот же фон на кнопке, что и при наведении на нее
• .focus : добавляет тени вокруг кнопки

Когда вы нажимаете где-то еще, .focus будет удален только класс. Вот почему вы должны видеть, что кнопка заполнена фоновым цветом без теней, таким же, как при наведении на нее курсора мыши.

Когда вы отменяете выбор кнопки, но ваша мышь все еще указывает на нее, .active класс удаляется, но эффект наведения, а также .focus все еще продолжается, заставляя кнопку выглядеть так, как будто вы ее не отменяли.

Как только ваша мышь перемещается, эффект наведения исчезает, и .focus остается только. Вот почему вы должны видеть, что кнопка имеет только тени.

Если вы хотите немного больше различать состояние выбора и отмены выбора кнопки, вы можете написать CSS, чтобы отключить эффект наведения, если кнопка есть .focus , но нет .active :

 .selector .btn.focus:not(.active):hover {
    color: inherit;
    background-color: inherit;
    border-color: inherit;
}
  

демонстрация jsfiddle: https://jsfiddle.net/davidliang2008/mfqyp8j3/17/

Демонстрация Codepen: https://codepen.io/davidliang2008/full/yLJRZYy

GIF, чтобы показать, что он работает правильно в мобильном представлении: