質問編集履歴

1 初心者アイコンを有効化しました

asakura

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;
}
```
  • JavaScript

    21595 questions

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

  • jQuery

    8582 questions

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

  • HTML5

    5464 questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

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