javascriptでタッチ操作時のhoverアクション解除が分からない

Question

動きのあるページを作っていまして、

	<ul class="gnav">
		<li>
			<a>動物</a>
			<ul>
				<li><a>いぬ</a></li>
				<li><a>ねこ</a></li>
				<li><a>さる</a></li>
				<li><a>全部</a></li>

			</ul>
		</li>
　　　　</ul>

hoverすると多階層のメニューが出るようにしています。

.gnav {
  display: flex;
  height: 2rem;
  margin: 0 auto;
  width: 1000px;
  position: absolute;
  z-index: 10;
}
.gnav > li {
  width: 25%;
}
.gnav li {
  list-style: none;
  position: relative;
}
.gnav li a {
  background: #7ab6ee;
  border-right: 1px solid #eee;
  color: rgb(7, 6, 6);
  display: block;
  height: 2rem;
  line-height: 2rem;
  text-align: center;
  text-decoration: none;
  width: 100%;
}
.gnav li li {
  height: 0;
  overflow: hidden;
  transition: .5s;
}
.gnav li li a {
  border-top: 1px solid #eee;
}
.gnav li:hover > ul > li {
  height: 2rem;
  overflow: visible;
}

マウス操作では問題ないのですが、時に想定されるタッチ操作の場合、メニューが広がり、例えば「いぬ」を選択してもメニューが開きっぱなしになります。マウス操作であればカーソル移動でhoverが取れるのですが、タッチだとその点が不可能です。

$('.gnav li ul li').click(function(){
    let data = $(this).text();
    $('#AAA').text(data + "が選択されました");
    $('.gnav li').css("overflow","hidden");
    $('.gnav').css("overflow","visible");
});

一度オーバーフロー設定を隠せば？！と思いましたが、今度は二度と現れなくなったり、javascriptで試行錯誤していますが答えが見つかりません。

どなたかアドバイスいただけないでしょうか。

Answer 1

cssの:hoverで操作するのは難しいので、hover時にクラス(.state_hover)を付ける方法ではどうでしょうか。
メニュー以外をタップすることで閉じる形になっています。

<style>
/*.gnav li:hover > ul > li {*/
.gnav > li.state_hover ul > li {
	height: 2rem;
	overflow: visible;
}
</style>

<script>
// マウスオーバーで開く・閉じる + タップで開く
$('.gnav > li').on('mouseenter touchstart', function () {
	$(this).addClass('state_hover');
	return false;
}).on('mouseleave', function () {
	$(this).removeClass('state_hover');
});
// 他のところをタップで閉じる
$(document).on('touchstart', function (e) {
	$('.gnav > li').removeClass('state_hover');
});
</script>

Comments

[Izumo1101]

なるほど、
$(document).on('touchstart', function (e) {
が思いつきませんでした。なるほどなるほど。大変勉強になりました。