回答編集履歴

1 説明を追加

rururu3

rururu3 score 3561

2017/08/02 01:36  投稿

```HTML  
<div class="menu_layer" id="menu_layer" style="display: none;"></div>  
```  
をコメントにしてることによって  
```JavaScript
$('#menu_layer').load("./menu.html");
```
このロード時にidがmenu_layerが無いからだと思います。
この処理時にidがmenu_layerのが無いからロード処理ができない
&onイベントも同様に処理タイミング的にidがないと思われるので
index.html
```HTML
<!doctype html>
<html lang="en">
<head>
   <meta charset="utf-8">
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
   <link rel="stylesheet" href="main.css" />
   <script src="main.js"></script>
</head>
<body>
   <header>
       <div class="menu_layer" id="menu_layer" style="display: none;"></div>
       <div class="menu_btn" id="menu_btn"></div>
   </header>
</body>
</html>
```
menu.html
```HTML
<!-- 呼び出しページ(メニューページ:menu.html) -->
<div class="menu_popup">
   <div class="popup_btn_container">
       <div class="popup_btn" id="close_btn">とじる</div>
   </div>
</div>
```
main.js
```JavaScript
// メニューページ呼び出し時の操作:main.js
$(function() {
   // menu.htmlの読み込み
   $('#menu_layer').load("./menu.html", function( response, status, xhr ) {
       $('#close_btn').on('click', function() {
           $('#menu_layer').fadeOut(200);
       });
   });
   // メニューのオーバーレイ動作
   $('#menu_btn').on('click', function() {
       $('#menu_layer').fadeIn(250);
   });
});
```
こんな感じでとりあえず挙動するのは確認しました(cssは同じなので略)

思考するエンジニアのためのQ&Aサイト「teratail」について詳しく知る