以下の方法でheader.htmlを読み込み、モバイル用の共通のメニューを操作したいのですが動きません。
具体的には.menu-triggerをクリックしても#mobile_menu_exist のクラスmobile_menu_hiddenが消えてくれません。
header.htmlの内容を直接index.htmlに書き込むと動くので、.loadの使い方が悪いのか、読み込む順番なのかといろいろ変えたり調べたりしております。
.loadは非推奨になったというような文章も見かけたのですが、
他のやり方、順番などわかる方お教えください。
よろしくお願いいたします。
inc.js
javascript
1$(document).ready(function(){ 2 3$(function(){ 4 $("#head").load("../header.html"); 5 $("#foot").load("../footer.html"); 6 $("#sidebar").load("../sidebar.html"); 7}); 8 9$(function(){ 10 $(".menu-trigger").click(function(){ 11 $('#mobile_menu_exist').toggleClass('mobile_menu_hidden'); 12 $(this).toggleClass('active'); 13 }); 14}); 15 16});
index.html
html
1<!DOCTYPE html> 2<html class="no-js" lang="ja"> 3<head> 4<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 5<script type="text/javascript" src="./js/inc.js"></script> 6</head> 7<body> 8<header id="head"></header> 9 10</body> 11</html>
header.html
html
1<nav> 2<ul> 3<li>TOP</li> 4<li>home</li> 5</ul> 6</nav> 7 8 <nav class="mobile_menu"> 9 <div class="hum_btn"> 10 <a class="menu-trigger" href="#"> 11 <span></span> 12 <span></span> 13 <span></span> 14 </a> 15 </div> 16 </nav> 17 <section id="mobile_menu_exist" class="mobile_menu_hidden"> 18 <ul> 19<li>TOP</li> 20<li>home</li> 21 </ul> 22 </section>
回答4件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2018/10/16 04:55
2018/10/16 12:57
2018/10/17 04:50 編集
2018/10/17 05:45