質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
87.20%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

解決済

スマホでアコーディオンメニューの開閉を示すアイコンがうまく機能しない

kitikiti
kitikiti

総合スコア0

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

1回答

0評価

0クリップ

2299閲覧

投稿2018/07/06 02:15

編集2022/01/12 10:58

ハンバーガーメニューで下記の「drawer」を入れ、領域内スクロールがならないので、「myScroll」を入れました。
スマホではタップしても開かない(PCブラウザでは動作する)、下記のようなコードなのですが、どこを改善すればよいでしょうか?
どこがネックになっているかわからなかったのでjavascript得意な方見ていただけませんでしょうか?
「myScroll」が影響しているようです。
イメージ

js

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $('.drawer').drawer(); }); $(function(){ $("#nav > ul > li > p.accordion_icon").removeClass('active'); $("#nav > ul > li > ul").hide(); $("#nav > ul > li").on("click",function(){ $(this).siblings("li").find('> ul').slideUp(); $(this).siblings("li").find('> p.accordion_icon').removeClass('active'); $(this).find('> ul').slideToggle(800); $(this).find('> p.accordion_icon').toggleClass('active'); }); }); var myScroll; window.onload = function() { myScroll = new IScroll('#nav', { mouseWheel: true, scrollbars: true, fadeScrollbars: false, interactiveScrollbars: true, shrinkScrollbars: 'scale', }); }; </script>

html

<header> <button type="button" class="drawer-toggle drawer-hamburger"> <span class="sr-only">toggle navigation</span> <span class="drawer-hamburger-icon"></span> </button> <nav class="drawer-nav"> <ul id="" class="drawer-menu"> <li> <div id="side_menu"> <div id="side_logo"> <a href="/"><img src="img/common/logo.png" title="" alt=""></a> </div> <div id="nav"> <ul id="menu"> <li><a href="#"></a></li> <li><p class="menus"></p><p class="accordion_icon"><span></span><span></span></p> <ul class="child" > <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> <li><a href="#"></a></li> </ul> </div> <div class="side_contact"> <p><br> </p> <span class="side_tel"><a href="tel:"></a></span> <span class="side_contact_link"><a href="#"></a></span> </div> </div> </li> </ul> </nav> </header>

css

nav{ } div#side_menu { width: 260px; position: fixed; top: 0; left: 0; z-index: 2; background-color: #f8f8f8; padding: 0px 0px 0px 0px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } div#side_menu #side_logo { margin: 30px 0px 50px 0px; text-align: center; background-color: #f8f8f8; } div#nav { overflow-y: hidden; overflow-x: hidden; width: 260px; height: calc( 100vh - 315px ); position: relative; } div#side_menu ul { margin: 0px 0px 0px 0px; } div#side_menu ul::-webkit-scrollbar{ width: 12px; } div#side_menu ul::-webkit-scrollbar-track{ background: #fff; border: none; border-radius: 10px; box-shadow: inset 0 0 2px #777; } div#side_menu ul::-webkit-scrollbar-thumb{ background: #aaa; border-radius: 10px; box-shadow: none; } ul#menu li{ background-color: #f8f8f8; border-top: solid 1px #e3e3e3; border-bottom: solid 1px #e3e3e3; } ul#menu li a{ color: #000000; text-decoration: none; display: block; padding: 15px; } ul#menu li a:hover{ text-decoration: underline; background: #e3e3e3; } ul#menu li a:before { display: block; content: ""; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); left: 235px; width: 8px; height: 8px; margin-top: 4px; background: #393939; } ul#menu li a:after { display: block; content: ""; position: absolute; -webkit-transform: rotate(45deg); transform: rotate(45deg); left: 233px; width: 8px; height: 8px; margin-top: -12px; background: #f8f8f8; } ul#menu li a:hover:after { background: #e3e3e3; } ul#menu li p.menus { color: #000000; text-decoration: none; display: block; padding: 15px; cursor: hand; cursor: pointer; } ul#menu li p.menus:hover { text-decoration: underline; background: #e3e3e3; } ul#menu li p.menus:hover:after { /*background: none*/ } .accordion_icon, .accordion_icon span { display: inline-block; transition: all .4s; box-sizing: border-box; } .accordion_icon { position: relative; width: 25px; height: 25px; float: right; margin-right: 7px; margin-top: -29px; } .accordion_icon span { position: absolute; left: 6px; width: 50%; height: 2px; background-color: black; border-radius: 4px; -webkit-border-radius: 4px; -ms-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; } .accordion_icon span:nth-of-type(1) { top: 5px; transform: rotate(0deg); -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } .accordion_icon span:nth-of-type(2) { top: 5px; transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg); } .accordion_icon.active span:nth-of-type(1) { display:none; } .accordion_icon.active span:nth-of-type(2) { top: 5px; transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg); } ul#menu ul.child{ display: none; padding: 0; background: #e3e3e3; width: 260px; height: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; overflow-x:hidden; } ul#menu ul.child li{ border-top: none; border-bottom: none; margin-left: 70px; padding-left: -15px !important; background: #e3e3e3; color: #000000; list-style-type: disc; } ul#menu ul.child li a{ background: #e3e3e3; display: block; text-decoration: none; color: #000000; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } ul#menu ul.child li a:hover{ text-decoration: underline; } ul#menu ul.child li a:before { display: none; } ul#menu ul.child li a:after { display: none; } ul#menu ul.child li a:hover:after { display: none } /* div#nav::-webkit-scrollbar{ width: 6px; } div#nav::-webkit-scrollbar-track{ background: #fff; border: none; border-radius: 10px; box-shadow: inset 0 0 2px #777; } div#nav::-webkit-scrollbar-thumb{ background: #aaa; border-radius: 10px; box-shadow: none; }*/ div#side_menu .side_contact { width: 260px; height: 160px; margin: 0px 0px 0px 0px; padding: 0px 0px 0px 0px; background: #665947; text-align: center; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; position: absolute; /* bottom: 0; */ /* position: fixed; */ /* bottom: 0; */ /* left: 0; */ } div#side_menu .side_contact p { padding: 15px 15px 10px 15px; line-height: 150%; color: #FFFFFF; font-size: 80%; } div#side_menu .side_tel a { color: #FFFFFF; display: block; text-decoration: none; font-weight: bold; font-size: 150%; padding: 0px; } div#side_menu .side_tel a:hover { color: #FFFFFF; } div#side_menu .side_contact_link a{ /*width: 230px;*/ margin: 15px 35px 0px 35px; padding: 12px 0px 12px 0px; color: #FFFFFF; background: #afa186; text-decoration: none; display: block; font-size: 80%; }

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

m.ts10806
m.ts10806

2018/07/06 02:25

drawerクラスはHTML内のどこにもないようですが。。 >\$\('\.drawer'\)\.drawer\(\);
kitikiti
kitikiti

2018/07/06 03:03 編集

bodyに組んであります。 修正を行いました。
m.ts10806
m.ts10806

2018/07/06 04:45

そういうことですね。プラグインをお使いでしたらそのプラグインの公式ページURLを貼っておいてください。何もないと「自力で作ったもの」と認識されかねません。(”「drawer」を入れ”ではちょっと伝わりにくいかなと・・)

まだ回答がついていません

会員登録して回答してみよう

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
87.20%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。