asakura score 18
2017/08/02 00:15 投稿
| 【html：jQuery】ボタンでクリック時にメニュ一覧（外部html）を読み込ませたい |
| メニュ一覧をメインページとは別のhtmlページとして用意しています、 |
| メインページからメニュ一覧を表示するボタンをクリックしてもメニュが表示されません。 |
| なお、メインページに呼び出し先のメニュー一覧を記述した場合、 |
| 想定通りの挙動が出来てます。 |
| (index.htmlのコメントアウトを外して外部ファイルの読み込みを行わないと想定通りの挙動となります) |
| メニュ内容を外部ファイル化し、メインページから読出し |
| なおかつ読み込んだメニューページ内のボタン動作をmain.js記述の通り動かすには、 |
| どのように対処したら良いでしょうか。 |
| よろしくお願い致します。 |
| --- |
| ■環境 |
| jqueryのバージョン：jquery-1.12.4.min.js |
| 確認ブラウザ：Chrome 59,0 |
| ```html |
| <!-- 呼び出し元ページ(メインページ：index.html) --> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <link rel="stylesheet" href="css/style.css"> |
| <script src="js/jquery-1.12.4.min.js" type="text/javascript"></script> |
| <script src="js/main.js" type="text/javascript"></script> |
| </head> |
| <body> |
| <header> |
| <div class="menu_btn" id="menu_btn"></div> |
| </header> |
| <!-- <div class="menu_layer" id="menu_layer" style="display: none;"> |
| <div class="menu_popup"> |
| <div class="popup_btn_container"> |
| <div class="popup_btn" id="close_btn">とじる</div> |
| </div> |
| </div> --> |
| </body> |
| </html> |
| ``` |
| ```html |
| <!-- 呼び出しページ(メニューページ：menu.html) --> |
| <div class="menu_layer" id="menu_layer"> |
| <div class="menu_popup"> |
| <div class="popup_btn_container"> |
| <div class="popup_btn" id="close_btn">とじる</div> |
| </div> |
| </div> |
| ``` |
| ```js |
| // メニューページ呼び出し時の操作：main.js |
| $(function() { |
| // menu.htmlの読み込み |
| $('#menu_layer').load("./menu.html"); |
| // メニューのオーバーレイ動作 |
| $('#menu_btn').on('click', function() { |
| $('#menu_layer').fadeIn(250); |
| }); |
| $('#close_btn').on('click', function() { |
| $('#menu_layer').fadeOut(200); |
| }); |
| }); |
| ``` |
| ```css |
| @charset "UTF-8"; |
| /* 参考：スタイルシート(style.css) */ |
| header .menu_btn { |
| display: block; |
| position: absolute; |
| cursor: pointer; |
| top: 0px; |
| left: 0px; |
| width: 44px; |
| height: 44px; |
| background-image: url("../img/btn_menu.svg"); |
| background-size: 18px 15px; |
| background-position: left 10px top 25px; |
| background-repeat: no-repeat; |
| } |
| .menu_popup { |
| margin-top: 140px; |
| text-align: center; |
| background-color: #fff; |
| padding-bottom: 10px; |
| border-top: 2px solid #f4566d; |
| border-bottom: 2px solid #f4566d; |
| } |
| .menu_popup .popup_btn_container { |
| text-align: center; |
| margin: 20px 0px; |
| } |
| .menu_popup .popup_btn { |
| display: inline-block; |
| width: 140px; |
| height: 24px; |
| line-height: 24px; |
| color: #561219; |
| text-align: center; |
| font-size: 12px; |
| background-color: #f2dadf; |
| border-radius: 12px; |
| } |
| ``` |
