teratail header banner
teratail header banner
質問するログイン新規登録

回答編集履歴

4

誤字

2016/10/01 10:07

投稿

tama_yn0815
tama_yn0815

スコア143

answer CHANGED
@@ -33,11 +33,11 @@
33
33
 
34
34
  ```javascript
35
35
  $('.menu-trigger').on('click', function(e){
36
- e..preventDefault();
36
+ e.preventDefault();
37
37
  $('.look-trigger').toggleClass('active');
38
38
  });
39
39
  $('.look-trigger').on('click', function(e){
40
- e..preventDefault();
40
+ e.preventDefault();
41
41
  $('#menu-arrow').toggleClass('open');
42
42
  });
43
43
  ```
@@ -49,7 +49,7 @@
49
49
  $('.menu-trigger')
50
50
  ⇒クリックしたい要素をセレクターで拾います。
51
51
 
52
- e..preventDefault();
52
+ e.preventDefault();
53
53
  ⇒イベントをブラウザに通知しなくなります。
54
54
   aタグなら、hrefに遷移する動作をしなくなります。
55
55
  ```

3

追記

2016/10/01 10:07

投稿

tama_yn0815
tama_yn0815

スコア143

answer CHANGED
@@ -24,11 +24,32 @@
24
24
 
25
25
  ---
26
26
  **解決策**
27
+
28
+ ```html
29
+ <a class="look-trigger" href="javascript:void(0);"></a>
30
+ <a class="menu-trigger" href="javascript:void(0);"><div id="menu-arrow"></div></a>
31
+ ```
32
+
33
+
27
34
  ```javascript
28
- $(document).on('click', '.menu-trigger', function(){
35
+ $('.menu-trigger').on('click', function(e){
36
+ e..preventDefault();
29
- $('html').toggleClass('active');
37
+ $('.look-trigger').toggleClass('active');
30
38
  });
31
- $(document).on('click', '.look-trigger', function(){
39
+ $('.look-trigger').on('click', function(e){
40
+ e..preventDefault();
32
- $('html').toggleClass('open');
41
+ $('#menu-arrow').toggleClass('open');
33
42
  });
34
43
  ```
44
+
45
+ ```
46
+ <a href="javascript:void(0);">
47
+ ⇒こうするとデフォルトになにもしなく、なります。
48
+
49
+ $('.menu-trigger')
50
+ ⇒クリックしたい要素をセレクターで拾います。
51
+
52
+ e..preventDefault();
53
+ ⇒イベントをブラウザに通知しなくなります。
54
+  aタグなら、hrefに遷移する動作をしなくなります。
55
+ ```

2

追記

2016/10/01 10:03

投稿

tama_yn0815
tama_yn0815

スコア143

answer CHANGED
@@ -1,3 +1,5 @@
1
+ ---
2
+ **問題点**
1
3
  ```javascript
2
4
  $(document).on('click', '.menu-trigger', function(){
3
5
  $('html').toggleClass('active');
@@ -15,5 +17,18 @@
15
17
 
16
18
  詳しくは以下を読むとわかります。
17
19
 
20
+ [jQeryイベント](http://www.jquerystudy.info/tutorial/applied/flow2.html)
18
21
 
22
+
23
+ 以上のことを踏まえて、いかに解決策を書きます。
24
+
25
+ ---
26
+ **解決策**
27
+ ```javascript
19
- [jQeryイベント](http://www.jquerystudy.info/tutorial/applied/flow2.html)
28
+ $(document).on('click', '.menu-trigger', function(){
29
+ $('html').toggleClass('active');
30
+ });
31
+ $(document).on('click', '.look-trigger', function(){
32
+ $('html').toggleClass('open');
33
+ });
34
+ ```

1

誤字脱字

2016/10/01 09:55

投稿

tama_yn0815
tama_yn0815

スコア143

answer CHANGED
@@ -11,7 +11,7 @@
11
11
  });
12
12
  ```
13
13
 
14
- jQueryのreturn false;は、イベントの電波と要素のイベント処理、両方を終わらせます。
14
+ jQueryのreturn false;は、イベントの伝播と要素のイベント処理、両方を終わらせます。
15
15
 
16
16
  詳しくは以下を読むとわかります。
17
17