Diviでタッチデバイスのメニューで子階層が表示できずリンクに飛んでしまう

Diviを使ったサイトのメニューで不具合が生じてました。
ヘッダーの階層を持ったメニューがタッチデバイスだと、子階層を表示しないでそのままリンク先へ遷移してしまうようです。

Gitでなにやら解決策について話し合いがしてあるようだけどソースが確認できない!
原因不明でかなり困った状況になりました。(他のDiviを使用したサイトでは起きないのでどこが原因でそのような状況になってしまったのか根本解決ができなかったのです。)
公開まであと1日の状況で発覚したこの状況…

とりあえず、jQueryで動作を制御する事で回避しました。


/*タッチデバイスのメニュー バグをjQueryで制御*/
	jQuery('.menu-item-has-children a').on('tap', function(){
		var tapLink = jQuery(this);
		//jQuery('.menu-item-has-children')removeClass('et-hover');
		jQuery('.menu-item-has-children').removeClass('et-hover et-show-dropdown');
		jQuery(this).parent('li').addClass('et-hover et-show-dropdown');
		if (tapLink.hasClass('firstTap')) {
			jQuery('.menu-item-has-children a').removeClass('firstTap');
			return true;
		} else {
			jQuery('.menu-item-has-children a').removeClass('firstTap');
			tapLink.addClass('firstTap');
			return false;
		}
	});

さらに子階層の表示はhoverだけで制御してあったので、少しCSSも追加


.nav li.et-hover > ul {
    visibility: visible;
    opacity: 1;
}

根本の解決には至らなかったのですが、Diviを使用していて同じような状況になった方がいたら参考にしてください。

こちらは、Gitのフォーラムでの解決策(結局正しいソースが見つからなくて諦めた)
Primary Navigation :: Unexpected behavior on touch screens #853

Related Posts