1/26追記2
回答で頂いたコードを見比べて、私が作ったものと違う部分があったのでその部分を真似して修正してみました。
そうすると、PCのF12で検証していたのですが、PCでも動かなかったドロップダウンが作動しました!ありがとうございます。
しかし、スマートフォンですとタッチしてもドロップダウンが動きません。現在下記のURLはその状態です。
https://c10.future-shop.jp/fs/lady/MailMagazineEntry.html
引き続きご教示、アドバイスなどあれば頂けますと幸いです。よろしくお願いいたします。
1/26追記
私が[動作しないコード]として記載した物に間違えがありましたため、コードを再度書きたいのですが、
コードそのまま使用できるページでなくフューチャーショップというモール内で使用しているため若干仕様が異なるかと思い、実際実装テスト途中のページURLを記載しておきます。
https://c10.future-shop.jp/fs/lady/MailMagazineEntry.html
なかなか解決できず悩んでおりますので何卒お力頂けますと幸いです…。
お世話になっております。質問失礼いたします。
現在スマートフォン用にサイドメニューを作成しており、その際に
drawer
http://git.blivesta.com/drawer/
を使用しています。
基本の実装はできたのですが、ドロップダウンメニューを部分的に使用したく思っております。
その際、bootstrapの使用が推奨されており実装してみました。
シンプルにdrawerのみ組み込んだテストページでは動いたのですが、
実際のサイトで他のJSなどと一緒にしてみたところうまく動きません。
上記の状態から、JSなどを記述する順番などがおかしいのかなと思ったのですが…。
不具合が分かる方いらっしゃいましたら、ご指摘頂けますと幸いです。
↓テストページでドロップダウンが動いたコード(途中略)
<html lang="ja"> <head> <meta charset="utf-8"> <meta name="format-detection" content="telephone=no,address=no,email=no"> <meta name="robots" content="noindex,nofollow"> <title>スマートフォンスライドメニュー</title> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <!-- jquery & iScroll --> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://secure2.future-shop.jp/~lady/js/iscroll.js"></script> <script src="https://secure2.future-shop.jp/~lady/js/drawer.min.js"></script> <script src="https://secure2.future-shop.jp/~lady/js/dropdown.js"></script> <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.min.css"> <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.style.css"> </head> <div class="drawer drawer--left"> <nav class="drawer-nav"> <ul class="drawer-menu"> <li class="drawer-design7"><a href="http://www.cambio-w.com/">WOMEN</a></li> <li class="drawer-design6"><a href="http://www.cambio.co.jp/">MEN</a></li> <li class="drawer-design1"><a href="#">コンテンツ</a></li> <li class="drawer-design1"><a href="#">コンテンツ</a></li> <li class="drawer-design1"><a href="#">コンテンツ</a></li> <li class="drawer-design1"><a href="#">コンテンツ</a></li> <li class="drawer-design1"><a href="#">コンテンツ</a></li> <ul class="drawer-menu"> <li class="drawer-dropdown"> <a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">ドロップダウンタイトル<span class="drawer-caret"></span></a> </a> <ul class="drawer-dropdown-menu"> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ワンピース</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">トップス</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">シャツ・ブラウス</font></a></li> </ul> </li> </ul> </ul> </nav> <script> $(document).ready(function() { $('.drawer').drawer(); }); </script> <!-- ヘッダー看板 --> <div class="headerbox"> <table> <tr><td> <img src="#" width="100%"> </td> <td> <a href="#"><img src="#" width="100%"></a> </td> <td> <a href="#"><img src="#" width="100%"></a> </td> </table> </div> <!-- ヘッダー看板終わり --> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> </div> ページ中身
↓他のJSなどを使用しているページに実装しようとしたところ、
ドロップダウンが動かなくなったコード(途中略)
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- jQuery読み込み --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <!-- jS読み込み --> <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/accordionMenu/accordionMenu.js"></script> <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/swipebox/jquery.swipebox.js"></script> <script type="text/javascript" src="https://secure2.future-shop.jp/~lady/js/sp.js"></script> <script src="https://secure2.future-shop.jp/~lady/js/iscroll.js"></script> <script src="https://secure2.future-shop.jp/~lady/js/drawer.min.js"></script> <!-- CSS読み込み --> <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/css/gmenu.css" media="all" /> <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/js/accordionMenu/accordionMenu.css" media="all" /> <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/jQueryFlickSwipeSlideShow/css/base.css" media="all" /> <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/jQueryFlickSwipeSlideShow/css/common.css" media="all" /> <link rel="stylesheet" type="text/css" href="https://secure2.future-shop.jp/~lady/swipebox/swipebox.css" media="all" /> <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.min.css"> <link rel="stylesheet" href="https://secure2.future-shop.jp/~lady/css/drawer.style.css"> </head> <div class="drawer drawer--left"> <nav class="drawer-nav"> <ul class="drawer-menu"> <li class="drawer-design7"><a href="http://www.cambio-w.com/">WOMEN</a></li> <li class="drawer-design6"><a href="http://www.cambio.co.jp/">MEN</a></li> <li class="drawer-design1"><a href="#">コンテンツ</a></li> <li class="drawer-design1"><a href="#">コンテンツ</a></li> <li class="drawer-design1"><a href="#">コンテンツ</a></li> <li class="drawer-design1"><a href="#">コンテンツ</a></li> <li class="drawer-design1"><a href="#">コンテンツ</a></li> <ul class="drawer-menu"> <li class="drawer-dropdown"> <a class="drawer-menu-item drawer-design9" data-toggle="dropdown" role="button" aria-expanded="false">ドロップダウンタイトル<span class="drawer-caret"></span></a> </a> <ul class="drawer-dropdown-menu"> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">ワンピース</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">トップス</font></a></li> <li class="drawer-design8"><a class="drawer-dropdown-menu-item" href="#"><font color="#333333">シャツ・ブラウス</font></a></li> </ul> </li> </ul> </ul> </nav> <script> $(document).ready(function() { $('.drawer').drawer(); }); </script> <!-- ヘッダー看板 --> <div class="headerbox"> <table> <tr><td> <img src="#" width="100%"> </td> <td> <a href="#"><img src="#" width="100%"></a> </td> <td> <a href="#"><img src="#" width="100%"></a> </td> </table> </div> <!-- ヘッダー看板終わり --> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> </div> ページ中身
以上になります。何卒宜しくお願い致します。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2019/01/26 02:00
退会済みユーザー
2019/01/26 10:59