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

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

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

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

Q&A

解決済

4回答

5082閲覧

jqueryが動かないです。バージョンの違うものを二重で使っているのが問題なのですが解決法がわかりません。

TATSUY

総合スコア11

jQuery

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

0グッド

0クリップ

投稿2017/02/08 10:18

編集2017/02/09 13:55

スライドメニューとモーダルウィンドウを動かしたいのですが、二重で読み込んでいるためどちらかしか動きません。

コピペで作っているため、解決法がわからず困っています。
よろしくお願いします。

###該当のソースコード

<!DOCTYPE html> <html> <head> <meta charset="utf-8" />
<title>bike-map</title> <link type="text/css" rel="stylesheet" href="css/demo.css" /> <link type="text/css" rel="stylesheet" href="../dist/css/jquery.mmenu.all.css" /> <!-- スタイルシートの読み込み --> <link href="modal.css" rel="stylesheet"> <!-- ビューポートの設定 --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script type="text/javascript" src="http://code.jquery.com/jquery-2.2.0.js"></script> <script type="text/javascript" src="../dist/js/jquery.mmenu.all.min.js"></script> <script type="text/javascript"> $(function() { $('nav#menu').mmenu(); }); </script> <!-- JavaScriptの読み込み --> <script src="../dist/js/jquery.min.js"></script> <script src="modal.js"></script> <style> html, body { height: 100%; margin: 0; padding: 0; } map { height: 80%; width: 80%; } </style> </head> <body> <div id="page"> <div class="header"> <a href="#menu"><span></span></a> map </div> <nav id="menu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> <li><a href="#">Home</a></li> </ul> </nav> </div> <div id="map"> <img src="./img/map.png"> </div> <div id="footer"> <div class=pen> <p><a id="modal-open" class="button-link"><img src="./img/pen.png"></a></p> </div> </div> <!-- ここからモーダルウィンドウ --> <div id="modal-content"> <!-- モーダルウィンドウのコンテンツ開始 --> <div> <label>場所名:<br /> <input type="text" name="name" size="50" maxlength="255" /> </label> </div> <div> <label>評価:<br /> <select name="grade"><%=createOption(1, 5)%></select> </label> </div> <div> <label>危険度:<br /> <select name="danger"><%=createOption(1, 5)%></select> </label> </div> <div> <label>コメント:<br /> <input type="text" name="comment" size="50" maxlength="255" /> </label> </div> <label>lat: <input type="text" name="lat" size="50" maxlength="255" /> </label><br /> <label>lng: <input type="text" name="lng" size="50" maxlength="255" /> </label> <div> <input type="submit" value="登録" /> </div> <p><a id="modal-close" class="button-link">閉じる</a></p> <!-- モーダルウィンドウのコンテンツ終了 --> </div>
<!-- ここまでモーダルウィンドウ -->
</body>
</html>
```**modal.js** $(function(){ //モーダルウィンドウを出現させるクリックイベント $("#modal-open").click( function(){ //キーボード操作などにより、オーバーレイが多重起動するのを防止する $( this ).blur() ; //ボタンからフォーカスを外す if( $( "#modal-overlay" )[0] ) return false ; //新しくモーダルウィンドウを起動しない (防止策1) //if($("#modal-overlay")[0]) $("#modal-overlay").remove() ; //現在のモーダルウィンドウを削除して新しく起動する (防止策2) //オーバーレイを出現させる $( "body" ).append( '<div id="modal-overlay"></div>' ) ; $( "#modal-overlay" ).fadeIn( "slow" ) ; //コンテンツをセンタリングする centeringModalSyncer() ; //コンテンツをフェードインする $( "#modal-content" ).fadeIn( "slow" ) ; //[#modal-overlay]、または[#modal-close]をクリックしたら… $( "#modal-overlay,#modal-close" ).unbind().click( function(){ //[#modal-content]と[#modal-overlay]をフェードアウトした後に… $( "#modal-content,#modal-overlay" ).fadeOut( "slow" , function(){ //[#modal-overlay]を削除する $('#modal-overlay').remove() ; } ) ; } ) ; } ) ; //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する $( window ).resize( centeringModalSyncer ) ; //センタリングを実行する関数 function centeringModalSyncer() { //画面(ウィンドウ)の幅、高さを取得 var w = $( window ).width() ; var h = $( window ).height() ; // コンテンツ(#modal-content)の幅、高さを取得 // jQueryのバージョンによっては、引数[{margin:true}]を指定した時、不具合を起こします。 // var cw = $( "#modal-content" ).outerWidth( {margin:true} ); // var ch = $( "#modal-content" ).outerHeight( {margin:true} ); var cw = $( "#modal-content" ).outerWidth(); var ch = $( "#modal-content" ).outerHeight(); //センタリングを実行する $( "#modal-content" ).css( {"left": ((w - cw)/2) + "px","top": ((h - ch)/2) + "px"} ) ; } } ) ;
@charset "UTF-8"; /* ここからデモページ用のコード */ body { width: 100% ; height: 5000px ; padding: 0 ; } /* ここまでデモページ用のコード */ modal-content { width: 50% ; margin: 0 ; padding: 10px 20px ; border: 2px solid #aaa ; background: #fff ; position: fixed ; display: none ; z-index: 2 ; } modal-overlay { z-index: 1 ; display: none ; position: fixed ; top: 0 ; left: 0 ; width: 100% ; height: 120% ; background-color: rgba( 0,0,0, 0.75 ) ; } .button-link { color: #00f ; text-decoration: underline ; } .button-link:hover { cursor: pointer ; color: #f00 ; }
html, body { padding: 0; margin: 0; } body { background-color: #fff; font-family: Arial, Helvetica, Verdana; font-size: 14px; line-height: 22px; color: #666; position: relative; -webkit-text-size-adjust: none; } body * { text-shadow: none; } h1, h2, h3, h4, h5, h6 { line-height: 1; font-weight: bold; margin: 20px 0 10px 0; } h1, h2, h3 { font-size: 18px; } h4, h5, h6 { font-size: 16px; } p { margin: 0 0 10px 0; } a, a:link, a:active, a:visited, a:hover { color: inherit; text-decoration: underline; } nav:not(.mm-menu) { display: none; } .header, .content, .footer { text-align: center; } .header { background: linear-gradient(-135deg, #E4A972, #9941D8);; font-size: 16px; font-weight: bold; color: #fff; line-height: 40px; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 40px; padding: 0 50px; } footer { background: linear-gradient(-135deg, #E4A972, #9941D8); /* 背景色(黒) */ width:100%; /* 横の幅を100% */ height: 30px; /* 縦の幅を120px */ position: fixed; /* 絶対位置指定することを定義 */ bottom: 0px; /* 絶対位置指定(左0px,下0px) */ padding: 10px 0; /* 上下に余白を取る */ } .pen { text-align: center; } .header.fixed { position: fixed; top: 0; left: 0; } .footer.fixed { position: fixed; bottom: 0; left: 0; } .header a { display: block; width: 28px; height: 18px; padding: 11px; position: absolute; top: 0; left: 0; } .header a:before, .header a:after { content: ''; display: block; background: #fff; height: 2px; } .header a span { background: #fff; display: block; height: 2px; margin: 6px 0; } .content { padding: 150px 50px 50px 50px; }

###試したこと
現状:左上のスライドメニューは機能しませんが、モーダルウィンドウは画像のように表示されます。
イメージ説明

コメントを参考にさせていただき

<script src="../dist/js/jquery.min.js"></script>を消すと

スライドメニューとモーダルウィンドウは動きましたが、モーダルウィンドウ内の選択ができなくなりました。
イメージ説明

###補足情報(言語/FW/ツール等のバージョンなど)
コードブロックに関して
ハッシュタグで段落分けされていて誤解を招いた可能性があります。
上記のhtmlで一つのコードです。
申し訳ございません。

特定に関して
jquery.min.jsを読み込むとスライドメニューが動かなくなるので、jqueryの二重読み込みが原因かと
安直な考えですいません。

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

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

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

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

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

kei344

2017/02/08 10:22

質問文のコードはそれぞれコードブロックで囲んでいただけませんか? ```(バッククオート3つ)で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。
Lhankor_Mhy

2017/02/09 01:24

補足願います。『バージョンの違うものを二重で使っているのが問題』とありますが、それが問題であって他の原因ではないということは、どのようにして特定されましたか?
s8_chu

2017/02/09 13:43 編集

プラグインを使用している場合はそれの情報を追記してくださいませんか?modal.js, modal.css, demo.cssの内容についてもコードの追記をよろしくおねがいします。
guest

回答4

0

ベストアンサー

このように行うといかがでしょうか?

HTML

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <link type="text/css" rel="stylesheet" 7 href="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.7.8/css/jquery.mmenu.all.css"> 8 <link href="modal.css" rel="stylesheet"> 9 <link href="demo.css" rel="stylesheet"> 10 <title>bike-map</title> 11 <style type="text/css"> 12 html, body { 13 height: 100%; 14 margin: 0; 15 padding: 0; 16 } 17 18 map { 19 height: 80%; 20 width: 80%; 21 } 22 </style> 23</head> 24<body> 25<div id="page"> 26 <div class="header" id="header"> 27 <a href="#menu"><span></span></a> 28 bike-map 29 </div> 30 <nav id="menu"> 31 <ul> 32 <li><a href="#">Home</a></li> 33 <li><a href="#">Home</a></li> 34 <li><a href="#">Home</a></li> 35 <li><a href="#">Home</a></li> 36 </ul> 37 </nav> 38</div> 39 40<div id="map"> 41 <img src="test.png"> 42</div> 43 44<div id="footer"> 45 <div class=pen> 46 <p><a id="modal-open" class="button-link"><img src="test.png"></a></p> 47 </div> 48</div> 49 50<!-- ここからモーダルウィンドウ --> 51<div id="modal-content"> 52 <div> 53 <label>場所名:<br> 54 <input type="text" name="name" size="50" maxlength="255"> 55 </label> 56 </div> 57 <div> 58 <label>評価:<br> 59 <select name="grade"><%=createOption(1, 5)%></select> 60 </label> 61 </div> 62 <div> 63 <label>危険度:<br> 64 <select name="danger"><%=createOption(1, 5)%></select> 65 </label> 66 </div> 67 68 <div> 69 <label>コメント:<br> 70 <input type="text" name="comment" size="50" maxlength="255"> 71 </label> 72 </div> 73 74 <label>lat: 75 <input type="text" name="lat" size="50" maxlength="255"> 76 </label><br/> 77 <label>lng: 78 <input type="text" name="lng" size="50" maxlength="255"> 79 </label> 80 81 <div> 82 <input type="submit" value="登録"> 83 </div> 84 <p><a id="modal-close" class="button-link">閉じる</a></p> 85</div> 86 87<script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 88<script type="text/javascript" 89 src="https://cdnjs.cloudflare.com/ajax/libs/jQuery.mmenu/5.7.8/js/jquery.mmenu.all.min.js"></script> 90<script type="text/javascript"> 91 $(function () { 92 function centeringModalSyncer() { 93 var w = $(window).width(); 94 var h = $(window).height(); 95 var cw = $("#modal-content").outerWidth(); 96 var ch = $("#modal-content").outerHeight(); 97 $("#modal-content").css({"left": ((w - cw) / 2) + "px", "top": ((h - ch) / 2) + "px"}); 98 } 99 100 $('nav#menu').mmenu(); 101 102 $("#header").click(function () { 103 $("#modal-content,#modal-overlay").fadeOut("slow", function () { 104 $('#modal-overlay').remove(); 105 }); 106 }); 107 108 $("#modal-open").click(function () { 109 $(this).blur(); //ボタンからフォーカスを外す 110 if ($("#modal-overlay")[0]) return false; 111 $("body").append('<div id="modal-overlay"></div>'); 112 centeringModalSyncer(); 113 $("#modal-overlay").fadeIn("slow"); 114 $("#modal-content").fadeIn("slow"); 115 116 $("#modal-overlay,#modal-close").unbind().click(function () { 117 $("#modal-content,#modal-overlay").fadeOut("slow", function () { 118 $('#modal-overlay').remove(); 119 }); 120 }); 121 }); 122 //リサイズされたら、センタリングをする関数[centeringModalSyncer()]を実行する 123 $(window).resize(centeringModalSyncer); 124 }); 125</script> 126</body> 127</html>

modal.css

CSS

1@charset "UTF-8"; 2/* modal.css */ 3 4/* ここからデモページ用のコード */ 5body { 6 width: 100%; 7 height: 5000px; 8 padding: 0; 9} 10 11/* ここまでデモページ用のコード */ 12 13#modal-content { 14 width: 50%; 15 margin: 0; 16 padding: 10px 20px; 17 border: 2px solid #aaa; 18 background: #fff; 19 position: fixed; 20 display: none; 21 z-index: 2; 22} 23 24#modal-overlay { 25 display: none; 26 position: fixed; 27 top: 0; 28 left: 0; 29 width: 100%; 30 height: 120%; 31 background-color: rgba(0, 0, 0, 0.75); 32} 33 34.button-link { 35 color: #00f; 36 text-decoration: underline; 37} 38 39.button-link:hover { 40 cursor: pointer; 41 color: #f00; 42}

demo.css

CSS

1@charset "UTF-8"; 2 3/* demo.css */ 4html, body { 5 padding: 0; 6 margin: 0; 7} 8 9body { 10 background-color: #fff; 11 font-family: Arial, Helvetica, Verdana, sans-serif; 12 font-size: 14px; 13 line-height: 22px; 14 color: #666; 15 position: relative; 16 -webkit-text-size-adjust: none; 17} 18 19body * { 20 text-shadow: none; 21} 22 23h1, h2, h3, h4, h5, h6 { 24 line-height: 1; 25 font-weight: bold; 26 margin: 20px 0 10px 0; 27} 28 29h1, h2, h3 { 30 font-size: 18px; 31} 32 33h4, h5, h6 { 34 font-size: 16px; 35} 36 37p { 38 margin: 0 0 10px 0; 39} 40 41a, a:link, a:active, a:visited, a:hover { 42 color: inherit; 43 text-decoration: underline; 44} 45 46nav:not(.mm-menu) { 47 display: none; 48} 49 50.header, 51.content, 52.footer { 53 text-align: center; 54} 55 56.header { 57 background: linear-gradient(-135deg, #E4A972, #9941D8);; 58 font-size: 16px; 59 font-weight: bold; 60 color: #fff; 61 line-height: 40px; 62 63 -moz-box-sizing: border-box; 64 box-sizing: border-box; 65 width: 100%; 66 height: 40px; 67 padding: 0 50px; 68} 69 70footer { 71 background: linear-gradient(-135deg, #E4A972, #9941D8); /* 背景色(黒) */ 72 width: 100%; /* 横の幅を100% */ 73 height: 30px; /* 縦の幅を120px */ 74 position: fixed; /* 絶対位置指定することを定義 */ 75 bottom: 0; /* 絶対位置指定(左0px,下0px) */ 76 padding: 10px 0; /* 上下に余白を取る */ 77} 78 79.pen { 80 text-align: center; 81} 82 83.header.fixed { 84 position: fixed; 85 top: 0; 86 left: 0; 87} 88 89.footer.fixed { 90 position: fixed; 91 bottom: 0; 92 left: 0; 93} 94 95.header a { 96 display: block; 97 width: 28px; 98 height: 18px; 99 padding: 11px; 100 position: absolute; 101 top: 0; 102 left: 0; 103} 104 105.header a:before, 106.header a:after { 107 content: ''; 108 display: block; 109 background: #fff; 110 height: 2px; 111} 112 113.header a span { 114 background: #fff; 115 display: block; 116 height: 2px; 117 margin: 6px 0; 118} 119 120.content { 121 padding: 150px 50px 50px 50px; 122} 123

投稿2017/02/09 14:25

編集2017/02/09 14:26
s8_chu

総合スコア14731

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

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

TATSUY

2017/02/09 14:47

ありがとうございます! うまく表示することができました。
TATSUY

2017/02/09 14:47 編集

guest

0

html

1<script src="../dist/js/jquery.min.js"></script>

を消せば動きそうですが・・・。

投稿2017/02/09 04:58

Neko_doshi

総合スコア214

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

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

TATSUY

2017/02/09 13:34

コメントありがとうございます! 参考にさせていただき消すとスライドメニューとモーダルウィンドウの表示は可能になりました。 しかし、モーダルウィンドウ内のコンテンツが機能しなくなりました。。
guest

0

jQueryはたとえ同じバージョンでも2回読み込むとわけのわからない挙動をするようになります。1つだけ読み込みましょう。

投稿2017/02/09 00:55

masaya_ohashi

総合スコア9206

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

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

0

二重で読み込んでいるためどちらかしか動きません

状況がわかりませんが、片方に統一すればいいのでは?

投稿2017/02/08 10:42

yambejp

総合スコア114572

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問