質問編集履歴
2
spMenu.jsを修正
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -54,7 +54,8 @@
|
|
|
54
54
|
|
|
55
55
|
<spMenu.js（試してみたこと）>
|
|
56
56
|
```javascript
|
|
57
|
-
document.
|
|
57
|
+
var element = document.getElementsByClassName('menu-trigger')[0];
|
|
58
|
+
element.addEventListener("click", function(e) {
|
|
58
59
|
if($(this).hasClass('active')){
|
|
59
60
|
$(this).removeClass('active');
|
|
60
61
|
$('.navSp').removeClass('open');
|
|
@@ -65,7 +66,8 @@
|
|
|
65
66
|
$('.overlay').addClass('open');
|
|
66
67
|
}
|
|
67
68
|
}
|
|
68
|
-
document.
|
|
69
|
+
var element = document.getElementsByClassName('overlay')[0];
|
|
70
|
+
element.addEventListener("click", function(e) {
|
|
69
71
|
if($(this).hasClass('open')){
|
|
70
72
|
$(this).removeClass('open');
|
|
71
73
|
$('.menu-trigger').removeClass('active');
|
1
functions.phpの記述が不要だったため削除、contact.phpでのjsファイル呼び出しを追加、spMenu.jsを変更、本来やりたいscript記述を追加
title
CHANGED
|
File without changes
|
body
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
|
|
6
6
|
初歩的な質問で恐縮ですが、よろしくお願いします。
|
|
7
7
|
|
|
8
|
-
<contact.php（
|
|
8
|
+
<contact.php（body最下部でjsファイル呼び出し）>
|
|
9
9
|
```php
|
|
10
10
|
<?php require_once('./wp/wp-load.php'); ?>
|
|
11
11
|
<!DOCTYPE HTML>
|
|
@@ -45,29 +45,16 @@
|
|
|
45
45
|
</nav>
|
|
46
46
|
<div class="overlay"></div>
|
|
47
47
|
</div>
|
|
48
|
-
|
|
48
|
+
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/spMenu.js"></script>
|
|
49
49
|
<?php wp_footer(); ?>
|
|
50
50
|
</body>
|
|
51
51
|
</html>
|
|
52
52
|
|
|
53
53
|
```
|
|
54
54
|
|
|
55
|
-
<function.php（ドメイン/wp/wp-content/themes/テーマ名/）>
|
|
56
|
-
```php
|
|
57
|
-
<
|
|
55
|
+
<spMenu.js（試してみたこと）>
|
|
58
|
-
// spMenu
|
|
59
|
-
function spMenu() {
|
|
60
|
-
wp_enqueue_script('spMenu', get_template_directory_uri() . '/js/spMenu.js'
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
add_action( 'wp_enqueue_scripts', 'spMenu' );
|
|
65
|
-
|
|
66
|
-
```
|
|
67
|
-
|
|
68
|
-
<spMenu.js（ドメイン/wp/wp-content/themes/テーマ名/js/）>
|
|
69
56
|
```javascript
|
|
70
|
-
|
|
57
|
+
document.getElementByClassName('menu-trigger').onclick = function() {
|
|
71
58
|
if($(this).hasClass('active')){
|
|
72
59
|
$(this).removeClass('active');
|
|
73
60
|
$('.navSp').removeClass('open');
|
|
@@ -77,13 +64,37 @@
|
|
|
77
64
|
$('.navSp').addClass('open');
|
|
78
65
|
$('.overlay').addClass('open');
|
|
79
66
|
}
|
|
80
|
-
}
|
|
67
|
+
}
|
|
81
|
-
|
|
68
|
+
document.getElementByClassName('overlay').onclick = function() {
|
|
82
69
|
if($(this).hasClass('open')){
|
|
83
70
|
$(this).removeClass('open');
|
|
84
71
|
$('.menu-trigger').removeClass('active');
|
|
85
72
|
$('.navSp').removeClass('open');
|
|
86
73
|
}
|
|
87
|
-
}
|
|
74
|
+
}
|
|
75
|
+
```
|
|
88
76
|
|
|
77
|
+
<正常にハンバーガーメニューが起動したscript記述（HTML一部抜粋）※本来spMenu.jsでやりたいこと>
|
|
78
|
+
```html
|
|
79
|
+
<script>
|
|
80
|
+
$('.menu-trigger').on('click',function(){
|
|
81
|
+
if($(this).hasClass('active')){
|
|
82
|
+
$(this).removeClass('active');
|
|
83
|
+
$('.navSp').removeClass('open');
|
|
84
|
+
$('.overlay').removeClass('open');
|
|
85
|
+
} else {
|
|
86
|
+
$(this).addClass('active');
|
|
87
|
+
$('.navSp').addClass('open');
|
|
88
|
+
$('.overlay').addClass('open');
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
$('.overlay').on('click',function(){
|
|
92
|
+
if($(this).hasClass('open')){
|
|
93
|
+
$(this).removeClass('open');
|
|
94
|
+
$('.menu-trigger').removeClass('active');
|
|
95
|
+
$('.navSp').removeClass('open');
|
|
96
|
+
}
|
|
97
|
+
});
|
|
98
|
+
</script>
|
|
99
|
+
|
|
89
100
|
```
|