Всплывающеий блок при наведении мышки, hover, как заменить на клик?

Question

[Антон Вебсайтовский]

Всем привет.
Есть удобная конструкция, когда надо показать подменю на любом предмете, ссылка или svg и т.д.
Работает при наведение мышки, hover, а как можно сделать при клике чтоб всплывала и оставалась, закрытие тож при клике либо в любом месте кроме формы либо клик на туже ссылку когда кликали чтоб открыть.

Если без js нельзя, тогда как на js дописать такую возможность.

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

Пример тут:
https://codepen.io/AXOT/pen/eYjeKjb

Answer 1

[Вадим]

Например, с помощью чекбокса.

<label for="trigger">Пробег</label>
<strong>Выбрать</strong>
<input type="checkbox" id="trigger">

#trigger:checked ~ .prcr {
/* .pro:hover .prcr { */
  display: block;
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

Осталось его скрыть и увеличить зону кликабельности лэйбла как Вам надо, а не только на слово "Выбрать"

Comments

[Антон Вебсайтовский]

Ох уж эти лишние импуты, видел данный пример ), не очень удобный метод, можно считать за костыль.
Щас надо скрыть импут и растянуть его через стили, чтобы клик был в этой области где он и должен быть.
А по пустому место не скрывает, если не по форме кликать.

[Вадим]

Антон Вебсайтовский, Так Вы спрашиваете про костыль, но не хотитте делать костыль... Зря решил снова Вам отвечать...

Без JS только через focus-within можно более менее что-то сделать. Но всё равно нужен какой-то элемент, на котором будет фокус держаться.
На примере той же предложенной выше разметки, но с другими стилями:

.pro:focus-within .prcr {
  display: block;
  opacity: 1;
  visibility: visible;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

И не нужно инпут никуда расстягивать. Только лэйбл или псевдоэлемент от лэйбла.

[Вадим]

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

Например вот https://qna.habr.com/q/391470

[Антон Вебсайтовский]

Ну я все возможные варианты смотрю, и думаю что будет подходящим и лучшим.
Спасибо за примеры.

[Антон Вебсайтовский]

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

Значит без js не обойтись, ну может кто-то еще что-то знает, напишет, посоветует, ибо с импутом тема вроде и хорошая, но если кликнуть в пустом месте, то форму не закрывает, с импутом надо кликать туда же чтоб закрыть как и открыть.

[Вадим]

Антон Вебсайтовский, Label связан с инпутом. Клик по лэйблу - активирует инпут

[Антон Вебсайтовский]

Вадим, да, точно ), вспомнил ! я когда-то использовал данный метод.
А об :focus-within, не знал, надо почитать об этом методе, какая у него браузерная поддержка, это что-то новое.

[Антон Вебсайтовский]

Вадим, кстати, пробовал так, если список селекта выходит за окно, то при выборе в списке, окно закрывает.

Answer 2

[Niksak]

Можно вставить по нажатию на этот элемент класс Active элементу который нужно отобразить ( в классе прописать display: block и т.д ).
При нажатии снова на элемент или за пределами убрать класс.
При каждом клике делать проверку, если класс уже есть ( classList contains ) то значит его удалять, если нет еще - то добавлять

Comments

[Антон Вебсайтовский]

Это уже с применением js я так понимаю.

[Niksak]

Антон Вебсайтовский, дыа:)
Но мне реально легче с js чем с css))

Answer 3

[Антон Вебсайтовский]

Вообщем помогли сделать, за деньги.

Может кому надо:
https://codepen.io/AXOT/pen/JjBLWXK

Comments

[Niksak]

Вам это за бабки делали???

[Антон Вебсайтовский]

Niksak, ну я же написал. да

[Niksak]

Lol