タッチにより表示/非表示を切り替える方法

まずPC(マウスがある端末)用にhoverすると表示される要素を作ります。



これをandroid端末のブラウザ(chrome)で操作すると、タッチするとhover(大きくなる)され要素外を再度タッチすると元に戻ります(小さくなる)。
しかしios端末(safari)ではhoverされません(バグなのか仕様なのかは不明)

そこで、javascriptでtouchstartイベントをフックし、style.heightをいじって表示/非表示させます。

var min = document.defaultView.getComputedStyle(document.getElementById('footer'), '').height === "30px";
document.getElementById('footer').style.height = min ? height_max : "30px";

しかし、このままだと表示させた要素の中にあるボタンやテキスト入力欄にタッチしても表示/非表示されてしまします。

そこで入力領域がタッチされた場合は、表示/非表示されないようにします。


// footerにタッチしたら表示/非表示
var flg = false;
var height_max = "400px";
document.getElementById('footer').ontouchstart = function(e) {
if( flg ) {
flg = false;
return true;
}
var min = document.defaultView.getComputedStyle(document.getElementById('footer'), '').height === "30px";
document.getElementById('footer').style.height = min ? height_max : "30px";
return false;
};
// コンテンツ領域は表示／非表示させない
document.getElementById('footerContents').ontouchstart = function(e) { flg = true; return true; };


document.getElementById('footer').ontouchstartでfalseを返すのは既定の処理(android:chormeでhoverする処理)を無効化したい為です。