Как сделать, чтобы меню закрывалось?

Question

[partyzanx]

При наведении (в мобильном дизайне - при клике) на div:hover появляется span
Как сделать, чтобы в мобильном дизайне при втором клике (а на компьютерном дизайне также если убираешь мышь) на div эффект hover убирался и span, соответственно, скрывался

Просто в компьютерном дизайне никаких проблем не возникает - навёл - появилось, убрал - исчезло.
А в мобильном дизайне hover не существует, существует клик. Когда кликаешь на div , то span появляется , а при повторном клике , увы, не исчезает, приходится кликать куда-нибудь в сторону, что может ряд проблем таких как клик на другую ссылку.

Answer 1

[partyzanx]

Вопрос решился очень просто
После каждого div создаём ещё контейнер .hoverHelper

.hoverHelper {display: none;
width: 0;
    height: 0;
    top: 0;
    left: 0;
    margin-right: 0!important;
    transition-delay: .5s;}
.div:hover + .hoverHelper {display: unset;
    width: 40px;
    margin-left:-40px;
    height: 40px;
    top: 0; 
    transition-delay: .5s;
    z-index: 10;
}

Всё решилось очень просто на css

Получается, что этот .hoverHelper перекрывает div с отсрочкой полсекунды, и когда мы второй раз жмём на div, ты мы уже жмём на невидимый .hoverHelper, и поэтому эффект .div:hover снимается.

Answer 2

[FeST1VaL]

Добавить переменную состояния, т.е при открытии добавлять data-show='true' ну и при закрытии data-show='false'
И проверять состояние и выполнять уже действия по открытию и закрытию...

Comments

[partyzanx]

сложный вариант, как-то где-то делали какой-то функцией))

[FeST1VaL]

partyzanx, ну ищите) вообще вариант не сложный), только у вас нету классов... в примере свои добавлю

Что то типо такого...

<div class='menu__item' data-shown='false'>
  <span>content</span>
</div>
<div class='menu__item' data-shown='false'>
  <span>contentcontentcontent</span>
</div>
<div class='menu__item' data-shown='false'>
  <span class="b">contentcontentcontentcontent</span>
</div>
<div class='menu__item' data-shown='false'>
  <span>content</span>
</div>

$('.menu__item').click(function() {
	if ($(this).attr('data-shown') == 'false') {
		openSubmenu();
	} else {
		closeSubmenu();
	}
});

[partyzanx]

Артем Будин,

типа того, но не пашет чутка

var timesClicked = 0;

$(".category-menu-button").click(function() {
timesClicked++;

if (timesClicked%2==0) {
$('.menu-item').unbind("hover");
}

})