【罠】「クリックすると開く」メニューがiPhoneで動作しなかった原因が罠

コーディングをしていると「それは罠だろ」と思う瞬間があります。

教科書通りに組んでいるのに動作しない。何がおかしいのか一生懸命に調べて、そして分かった時の「 俺は悪くない 」「 そんなのわかるわけないだろ 」感。一言で言うとそれが罠です。

WordPressコメント欄が邪魔なのでたためるようにした

仕事でWordPressのサイトをいじっていたのですが、モバイル画面では記事とコメントとサイドバーが直列に並びます。

という並び順です。コメント欄はあまり頻繁には使われないのですが、ここが場所を広くとっていると、サイドバーのカテゴリや「最近の記事」などを見てもらう確率が下がります。

そこで、デバイスサイズがモバイルと判断できる時には、コメント欄を最初は非表示しておいて、「コメント」をクリックした時だけ表示する……という施策をすることにしました。

おれの能力…幽波紋スタンドは『jQuery』。その程度のコメントならクリックで出し入れするのはわけない、、、、。

結果、「わけない」ってほどでもないですが、なんとか動くものができ、Chromeの開発者ツールで確認できました。

ところが、念のため自分のiPhoneで表示させてみたところ、「コメント」をクリックしても動かないのです。あれっ？　と思ってChromeに戻って試してみると、こちらでは問題なく動きます。

なんだ!?　この妙な手応え……！

ええーっ。Σ（￣△￣;）

「 俺は悪くない 」「 そんなのわかるわけないだろ 」……これが罠です。

jQuery でクリックイベントをバインドする時は

 $('document').on('click', '#hoge', function(){});

とやるのが当たり前だと思い込んでいました。それがiPhoneでは利かない……とは。

とりあえず、上記記事を信じて、cursor: pointerを指定いれたらホントに動いた。唖然。信じられなーい。