\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n```\r\n\r\n\r\n\r\n以下の順だと、ページトップボタンは動いてドロップダウンは機能しません。\r\n```ここに言語を入力\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n```\r\nscript.jsの中身抜粋\r\n```ここに言語を入力\r\n\r\n//スムーススクロール\r\n\r\n$(function(){\r\n\t$('a[href^=\"#\"]').click(function(){\r\n\t\tvar speed = 500;\r\n\t\tvar href= $(this).attr(\"href\");\r\n\t\tvar target = $(href == \"#\" || href == \"\" ? 'html' : href);\r\n\t\tvar position = target.offset().top;\r\n\t\t$(\"html, body\").animate({scrollTop:position}, speed, \"swing\");\r\n\t\treturn false;\r\n\t});\r\n});\r\n\r\n\r\n//ページトップボタン\r\n$(function() {\r\n var topBtn = $('#page_top');\r\n topBtn.hide();\r\n //スクロールが100に達したらボタン表示\r\n $(window).scroll(function () {\r\n if ($(this).scrollTop() > 500) {\r\n topBtn.fadeIn();\r\n } else {\r\n topBtn.fadeOut();\r\n }\r\n });\r\n //スクロールしてトップ\r\n topBtn.click(function () {\r\n $('body,html').animate({\r\n scrollTop: 0\r\n }, 500);\r\n return false;\r\n });\r\n});\r\n\r\n\r\n\r\n```\r\n\r\nドロップダウンメニューに必要なjquery-1.12.4.min.jsとpopper.min.jsを上に記載すれば、下のscript.jsの中のページトップボタンのJSのみ機能しなくなります。\r\n\r\n情報が不足しておりましたら随時補足させていただきますのでご了承ください。","answerCount":2,"upvoteCount":0,"datePublished":"2019-11-26T04:34:44.862Z","dateModified":"2019-11-29T06:22:51.087Z","acceptedAnswer":{"@type":"Answer","text":"JQueryのバージョンや記載順で読み込まれないのであれば、どちらかをJavascriptで書けばよいと考え、実現性の高そうなページトップボタンを純粋なJavascriptにしました。\r\n\r\n■head内\r\n\r\nbootstrap/4.3.1/css/bootstrap.min.css\r\nuse.fontawesome.com/releases/v5.3.1/css/all.css\r\nslick-theme.css\r\nslick.css\r\nstyle.css\r\najax/libs/jquery/1.11.0/jquery.min.js\r\nload.js\r\n\r\n\r\n■body内\r\n・・・略・・・\r\nload.jsでフッター読み込み\r\n**JAVASCRIPT**\r\ncode.jquery.com/jquery-1.12.4.min.js\r\ncdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js\r\ncode.jquery.com/jquery-3.3.1.slim.min.js\r\nstackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js\r\nslick.min.js\r\nscript.js\r\n\r\n\r\n\r\n■script.jsの中に\r\n下記URLを参考に搭載\r\nhttps://memocarilog.info/jquery/7236","dateModified":"2019-11-29T06:46:50.359Z","datePublished":"2019-11-29T06:46:50.359Z","upvoteCount":0,"url":"https://teratail.com/questions/225554#reply-330880"},"suggestedAnswer":[{"@type":"Answer","text":"異なるバージョンのjQueryを読み込んでいますが、読み込むのはどちらか一方にしましょう。\r\n今、3.3.1の方は`jquery-3.3.1.slim.min.js`を読み込んでいますがurlにslimがついていないものを使うようにしてください。slim版はanimateを含む一部メソッドが実装されていません。\r\n\r\nそれと、scriptタグで自分が書いたプログラムを読み込むときはjQueryやbootstrap、popperの後に書くようにしてください。","dateModified":"2019-11-26T07:57:31.853Z","datePublished":"2019-11-26T07:57:31.853Z","upvoteCount":2,"url":"https://teratail.com/questions/225554#reply-329949","comment":[{"@type":"Comment","text":"早速のご回答ありがとうございます。\r\n\r\nまずこの順で試したところ、ページトップボタンは復活しましたが、dropdown機能が効かなくなってしまいました。\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n次に、popper.min.jsはなぜかjquery-1.12.4.min.jsとペアでないと動かなかったので以下の順にしたのですが、\r\nそれでもdropdown機能は効きませんでした。ページトップボタンは効いています。\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\ns8_chuさんの仰るように、ちょっと時間がかかってしまうかもしれませんが\r\nもう少しコードを増やしてアップしますのでまたご相談させてください。","datePublished":"2019-11-28T00:33:39.809Z","dateModified":"2019-11-28T00:33:39.809Z"},{"@type":"Comment","text":"追記してもらったページのソースはどの状態のものなのでしょうか?\r\nソースを見てみましたがjqueryのバージョンが3.3.1のほかに1.11.0も読み込まれているようです。\r\nどのバージョンのjqueryを使うかを決めて、一度読み込むjsやcssを整理したほうがいいと思います。","datePublished":"2019-11-28T06:49:32.628Z","dateModified":"2019-11-28T06:49:32.628Z"},{"@type":"Comment","text":"mistnさま\r\n\r\nfooterをload.jsを使って表示させていまして、\r\n内に書かないと読み込まれないため、このような構成になっています。\r\n\r\n・・・\r\n\r\n\r\n\r\n・・・\r\n\r\nとしてもdropdown機能は働きませんでした。。。","datePublished":"2019-11-28T09:59:56.733Z","dateModified":"2019-11-28T09:59:56.733Z"},{"@type":"Comment","text":"\r\n\r\n\r\n\r\n\r\nhttps://getbootstrap.com/docs/4.4/getting-started/introduction/\r\nにあるものです。(jqueryはslim版ではないものに変えています)\r\ncssとjsをこれに置き換えてみてもらえませんか?","datePublished":"2019-11-28T12:43:21.721Z","dateModified":"2019-11-28T12:43:21.721Z"},{"@type":"Comment","text":"mistnさま\r\n\r\nこの際footerのloadを無視して、以下のようにしてみました。\r\n\r\n■head内\r\n\r\n\r\n\r\n・・・略・・・\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n■body内\r\n\r\n \r\n \r\n \r\n \r\n \r\n\r\n\r\n\r\n\r\n結果、dropdownは無効でした。\r\n\r\n\r\n次に、head内にcssもjsすべて移動してみましたら、dropdownもslickも効きませんでした。\r\nmistn様の環境ではデモサイトでうまく表示されますでしょうか?\r\n私のPC環境が悪いのかもしれません。。何か違いが判明すればよいのですが。。。","datePublished":"2019-11-29T01:31:23.969Z","dateModified":"2019-11-29T01:31:23.969Z"},{"@type":"Comment","text":"slickは確認していませんでしたが、ドロップダウンとページトップボタンについては私の環境で動作を確認しています。\r\nslickは調べてみるとjqueryの1.11.0でうまく動くように作られている(?)ようです。ただ、jqueryの3.4.1で動かしているコードもあるようなので動かないことはないと思います。\r\n\r\nとりあえずドロップダウン、ページトップボタン、slickの各機能だけを実装したHTML/CSS/JSを作ってみましょう。動作を確認したらそれらを組み合わせてみてください。\r\njqueryのどのバージョンを使うかはあなた次第ですが3.4.1を使うのが無難だと思います。","datePublished":"2019-11-29T04:00:29.288Z","dateModified":"2019-11-29T04:01:14.831Z"},{"@type":"Comment","text":"mistnさま\r\n\r\n長期間相談に乗っていただき、感謝いたします。\r\nJQueryを使わなければ干渉しあわないのではないか?と思い、\r\nページトップボタンを純粋なjavascriptに置き換えてみたら、両方とも動きました!\r\nその代わりslimでないとdropdownは効かないままなのでスムーススクロールが実現できていないのですが、\r\nこれもおいおい別の質問でお願いしようと思います。\r\n解決策は別途記載いたします。\r\n\r\nこの度は本当にありがとうございました。","datePublished":"2019-11-29T06:18:50.575Z","dateModified":"2019-11-29T06:18:50.575Z"}]}],"breadcrumb":{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"item":{"@id":"https://teratail.com","name":"トップ"}},{"@type":"ListItem","position":2,"item":{"@id":"https://teratail.com/tags/JavaScript","name":"JavaScriptに関する質問"}},{"@type":"ListItem","position":3,"item":{"@id":"https://teratail.com/questions/225554","name":"Bootsrap4でドロップダウンメニューを追加すると、その他の一部JSが動かなくなる"}}]}}}
質問するログイン新規登録

Q&A

解決済

2回答

2257閲覧

Bootsrap4でドロップダウンメニューを追加すると、その他の一部JSが動かなくなる

qa-second

総合スコア12

JavaScript

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

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2019/11/26 04:34

編集2019/11/29 06:22

0

0

ナビゲーションメニューにドロップダウンメニューを搭載してから、それまで機能していたページトップボタンのJSが効かなくなってしまいました。

ドロップダウンは機能するが、ページトップボタンは機能しない現状

<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </body> </html>

以下の順だと、ページトップボタンは動いてドロップダウンは機能しません。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript" src="js/script.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> </body> </html>

script.jsの中身抜粋

//スムーススクロール $(function(){ $('a[href^="#"]').click(function(){ var speed = 500; var href= $(this).attr("href"); var target = $(href == "#" || href == "" ? 'html' : href); var position = target.offset().top; $("html, body").animate({scrollTop:position}, speed, "swing"); return false; }); }); //ページトップボタン $(function() { var topBtn = $('#page_top'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 500) { topBtn.fadeIn(); } else { topBtn.fadeOut(); } }); //スクロールしてトップ topBtn.click(function () { $('body,html').animate({ scrollTop: 0 }, 500); return false; }); });

ドロップダウンメニューに必要なjquery-1.12.4.min.jsとpopper.min.jsを上に記載すれば、下のscript.jsの中のページトップボタンのJSのみ機能しなくなります。

情報が不足しておりましたら随時補足させていただきますのでご了承ください。

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

s8_chu

2019/11/26 07:48

質問者さんの問題を再現するために必要なコードを jsFiddle などを使用しても良いので教えていただけませんか?
qa-second

2019/11/28 02:29

s8_chuさま お待たせいたしました。jsFiddleに挑戦しようかと思いましたが、jsを複数指定する方法がわからなかったのでレンタルサーバーに入れたURLを補足で記載させていただきます。 なるべく無駄は省いたとは思いますが、今度はコードが多すぎたら申し訳ありません。
guest

回答2

0

異なるバージョンのjQueryを読み込んでいますが、読み込むのはどちらか一方にしましょう。
今、3.3.1の方はjquery-3.3.1.slim.min.jsを読み込んでいますがurlにslimがついていないものを使うようにしてください。slim版はanimateを含む一部メソッドが実装されていません。

それと、scriptタグで自分が書いたプログラムを読み込むときはjQueryやbootstrap、popperの後に書くようにしてください。

投稿2019/11/26 07:57

mistn

総合スコア1191

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

qa-second

2019/11/28 00:33

早速のご回答ありがとうございます。 まずこの順で試したところ、ページトップボタンは復活しましたが、dropdown機能が効かなくなってしまいました。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript" src="js/script.js"></script> 次に、popper.min.jsはなぜかjquery-1.12.4.min.jsとペアでないと動かなかったので以下の順にしたのですが、 それでもdropdown機能は効きませんでした。ページトップボタンは効いています。 <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script> <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript" src="js/script.js"></script> s8_chuさんの仰るように、ちょっと時間がかかってしまうかもしれませんが もう少しコードを増やしてアップしますのでまたご相談させてください。
mistn

2019/11/28 06:49

追記してもらったページのソースはどの状態のものなのでしょうか? ソースを見てみましたがjqueryのバージョンが3.3.1のほかに1.11.0も読み込まれているようです。 どのバージョンのjqueryを使うかを決めて、一度読み込むjsやcssを整理したほうがいいと思います。
qa-second

2019/11/28 09:59

mistnさま footerをload.jsを使って表示させていまして、 <head>内に書かないと読み込まれないため、このような構成になっています。 ・・・ <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript" src="js/load.js"> </script> </head> ・・・ としてもdropdown機能は働きませんでした。。。
mistn

2019/11/28 12:43

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script> https://getbootstrap.com/docs/4.4/getting-started/introduction/ にあるものです。(jqueryはslim版ではないものに変えています) cssとjsをこれに置き換えてみてもらえませんか?
qa-second

2019/11/29 01:31

mistnさま この際footerのloadを無視して、以下のようにしてみました。 ■head内 <head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#"> <meta charset="UTF-8"> ・・・略・・・ <!-- スタイルシートはここから --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> <link rel="stylesheet" type="text/css" href="css/slick-theme.css"/> <link rel="stylesheet" type="text/css" href="css/slick.css"/> <link rel="stylesheet" href="css/style.css"> </head> ■body内 <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/js/bootstrap.min.js" integrity="sha384-3qaqj0lc6sV/qpzrc1N5DC6i1VRn/HyX4qdPaiEFbn54VjQBEU341pvjz7Dv3n6P" crossorigin="anonymous"></script> <script type="text/javascript" src="js/slick.min.js"></script> <script type="text/javascript" src="js/script.js"></script> </body> </html> 結果、dropdownは無効でした。 次に、head内にcssもjsすべて移動してみましたら、dropdownもslickも効きませんでした。 mistn様の環境ではデモサイトでうまく表示されますでしょうか? 私のPC環境が悪いのかもしれません。。何か違いが判明すればよいのですが。。。
mistn

2019/11/29 04:01 編集

slickは確認していませんでしたが、ドロップダウンとページトップボタンについては私の環境で動作を確認しています。 slickは調べてみるとjqueryの1.11.0でうまく動くように作られている(?)ようです。ただ、jqueryの3.4.1で動かしているコードもあるようなので動かないことはないと思います。 とりあえずドロップダウン、ページトップボタン、slickの各機能だけを実装したHTML/CSS/JSを作ってみましょう。動作を確認したらそれらを組み合わせてみてください。 jqueryのどのバージョンを使うかはあなた次第ですが3.4.1を使うのが無難だと思います。
qa-second

2019/11/29 06:18

mistnさま 長期間相談に乗っていただき、感謝いたします。 JQueryを使わなければ干渉しあわないのではないか?と思い、 ページトップボタンを純粋なjavascriptに置き換えてみたら、両方とも動きました! その代わりslimでないとdropdownは効かないままなのでスムーススクロールが実現できていないのですが、 これもおいおい別の質問でお願いしようと思います。 解決策は別途記載いたします。 この度は本当にありがとうございました。
guest

0

自己解決

JQueryのバージョンや記載順で読み込まれないのであれば、どちらかをJavascriptで書けばよいと考え、実現性の高そうなページトップボタンを純粋なJavascriptにしました。

■head内

bootstrap/4.3.1/css/bootstrap.min.css
use.fontawesome.com/releases/v5.3.1/css/all.css
slick-theme.css
slick.css
style.css
ajax/libs/jquery/1.11.0/jquery.min.js
load.js

■body内
・・・略・・・
load.jsでフッター読み込み
JAVASCRIPT
code.jquery.com/jquery-1.12.4.min.js
cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js
code.jquery.com/jquery-3.3.1.slim.min.js
stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js
slick.min.js
script.js

</body> </html>

■script.jsの中に
下記URLを参考に搭載
https://memocarilog.info/jquery/7236

投稿2019/11/29 06:46

qa-second

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.29%

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

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

質問する

関連した質問