BOOK Studio947
狩野祐東・狩野さやか著書

ご質問があります。

asked 5年 ago

 初心者がサイトを作るのに、参考にさせて頂いております。解説も分かり易く本当に助かっています。ありがとうございます。

さて本題なのですが、本書の02-02″レスポンシブなナビゲーション”を当サイトに実装しようとしています。
PCで動作確認すると上手く動いているのですが、iPhone(ios8.3)のサファリブラウザから動作確認すると、画面をスクロールした時に、親ボタンに隠れたメニューが意図せず展開してしまいます。同じ端末のクロームでは大丈夫なのですが、こちらも画面を縦→横とすると、親ボタンからメニューが勝手に展開します。

恐らくP105の resizeイベントが絡んでいるのではないかと思うのですが、よく分かりません。サポートの範囲を超えているかも知れませんが、答えて頂ける範囲でよいので、サイトの動作を確認して頂けないでしょうか?お手数ですがよろしくお願いします。

4 Answers
狩野 祐東 Staff answered 5年 ago

ノラネコさんはじめまして。
ご質問ありがとうございます。

調べてご連絡しますので、少しお待ちいただけますか?

狩野 祐東 Staff answered 5年 ago

ソースを拝見しました。
かわいいサイトですね。
おそらく、このfindのセレクタではほしい要素(メニュー項目のli)を探せないと思います(.globalNav > はいらない?)。これが原因なのではないかと思います。

var listFloat = $nav.find('.globalNav > .dropdown-menu').css('float');

試してみてください。
もし直らないようであれば、またお気軽にご連絡ください。

answered 5年 ago

“お礼です”
 直りました。お返事を頂けるどころか、コードを見て頂き、セレクタの検証までして頂いて何とお礼を申してよいか分かりません。自分でもjQueryのコードを見直し、その他も検証してみたところ、
CSSメディアクエリの@media screen and (max-width:600px) {
クラスドロップダウンメニューに.dropdown-menu {
フロート:ノーンが書かれていないfloat: none
というもの凄く初歩的なミスを発見してしまいました。書かれていないスタイルを.findすることはできませんね。本当にお騒がせしてしまい申し訳ありませんでした。完全にこちらのミスです。
iPhone のサファリ、クロームでも問題なく動作することを確認いたしました。本当にありがとうございました。

初心者の作る稚拙な、まだモックアップ段階のサイトを見て、お時間を割いて検証して下さったことを本当に感謝しいたします。jQueryの勉強は楽しいです。今後も、難しいjQueryまわりの実装を御著書を参考にさせて頂き頑張ってみようと思います。この度は本当にご親切にありがとうございました。

狩野 祐東 Staff answered 5年 ago

直ってよかったです。
ところで、ちょっと誤解されているかもしれませんが、jQueryが.findなどで探すのはHTMLの要素であって、CSSではありません。CSSはHTMLの各要素にくっついている情報なので、要素を探し出せばそのCSSを操作できます。
なので、CSSがなかったから探し出せなかったということではありません(ただ、そのCSSは書いていないと正しく動かないと思いますが)。

これからもがんばってください。