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

質問編集履歴

3

改善

2019/11/13 05:53

投稿

zuibunnemutai
zuibunnemutai

スコア4

title CHANGED
@@ -1,1 +1,1 @@
1
- [angular]タブ操作クリックイベント
1
+ [bootstrap4]dropdownで親要素への伝播止め方法
body CHANGED
@@ -1,9 +1,14 @@
1
- 以下のsampleというコンポーネント内でクリックによりタブ操作を行えるボタンを実装したいですが、tabのタグ内class内のactiveをON<=>OFFする方法がわかりません
1
+ 以下のsampleというコンポーネント内でドロップダウンメニュー(子)を追加したのですが、ドロップダウン(子)を押下した際に、親要素のクリックイベントも同時発火してしまう為、子要素のみドロップダウメニュー開くように実装したいです。
2
+
2
- セレクトボックスでいうselectIndexのような、activeタブ設定するような方法があるのでしょうか
3
+ stopPropagation使用しようと思ったのです、toggle操作でりclickイベントが発生すわけではなく、どちらイベントも発火しませんでし
3
4
  できればjqueryなしで実現したいです。
4
5
 
6
+ 使用技術
7
+ - angular5
8
+ - bootstrap4
9
+
5
- - コンポーネント構成
10
+ コンポーネント構成
6
- sample.component
11
+ - sample.component
7
12
  |_sample.component.html
8
13
  |_sample.component.ts
9
14
 
@@ -15,30 +20,42 @@
15
20
 
16
21
  - sample.component.html
17
22
  ``` sample.component.html
18
- <div class="detail" (click)="changeActiveTab()">
19
- クリックボタン</div>
20
-
21
23
  <div>
22
- <nav>
23
- <div class="nav nav-tabs" id="nav-tab" role="tablist">
24
- <a class="nav-item nav-link active" id="nav-a-tab" data-toggle="tab" href="#nav-a" role="tab" aria-controls="nav-a" aria-selected="true">タブA</a>
25
- <a class="nav-item nav-link" id="nav-b-tab" data-toggle="tab" href="#nav-b" role="tab" aria-controls="nav-b" aria-selected="false">タブB</a>
26
- </div>
27
- </nav>
28
- <div class="tab-content" id="nav-tabContent">
29
- <div class="tab-pane fade show active" id="nav-a" role="tabpanel" aria-labelledby="nav-a-tab">
30
- tab A content
31
- </div>
32
- <div class="tab-pane fade" id="nav-b" role="tabpanel" aria-labelledby="nav-b-tab">
33
- tab B content
34
- </div>
35
- </div>
36
- </div>
24
+ <ng-container *ngFor="let sample of sampleList, let i = index" >
25
+ <ul (click)="parentsAction()" class="cursor-pointer" >
26
+ <li>
27
+ <div class="row" style="box-sizing: border-box;">
28
+ <div class="col-6 pl-10 pr-2 my-auto" style="box-sizing: border-box;">
29
+ 親イベント発火
30
+ </div>
31
+ <div class="col-6" style="box-sizing: border-box;">
32
+ <div class="row">
33
+ <div class="col-12 clearfix">
34
+ <div class="m-auto float-right">
35
+ <div class="dropright">
36
+ <i (click)="childOnlyAction()" id="open-dropdown" aria-hidden="true" class="material-icons" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">more_horiz</i>
37
+ <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
38
+ <a class="dropdown-item">プルダウンアイテム1</a>
39
+ <a class="dropdown-item">プルダウンアイテム2</a>
40
+ </div>
41
+ </div>
42
+ </div>
43
+ </div>
44
+ </div>
45
+ </div>
46
+ </div>
47
+ </li>
48
+ </ul>
49
+ </ng-container>
50
+ </div>
37
51
  ```
38
52
 
39
53
  - sample.component.ts
40
54
  ```
41
- changeActiveTab(value) {
55
+ childOnlyAction() {
56
+ event.stopPropagation();
57
+ console.log('click inside input');
58
+ return false;
42
- //不明箇所
59
+ //これだと親子どちらもクリックでき
43
60
  }
44
61
  ```

2

誤字

2019/11/13 05:53

投稿

zuibunnemutai
zuibunnemutai

スコア4

title CHANGED
File without changes
body CHANGED
@@ -1,5 +1,6 @@
1
1
  以下のsampleというコンポーネント内でクリックによりタブ操作を行えるボタンを実装したいのですが、tabのタグ内class内のactiveをON<=>OFFする方法がわかりません。
2
2
  セレクトボックスでいうselectIndexのような、activeタブを設定するような方法があるのでしょうか。
3
+ できればjqueryなしで実現したいです。
3
4
 
4
5
  - コンポーネント構成
5
6
  sample.component

1

誤字

2019/11/12 06:07

投稿

zuibunnemutai
zuibunnemutai

スコア4

title CHANGED
File without changes
body CHANGED
@@ -25,7 +25,7 @@
25
25
  </div>
26
26
  </nav>
27
27
  <div class="tab-content" id="nav-tabContent">
28
- <div #navown class="tab-pane fade show active" id="nav-a" role="tabpanel" aria-labelledby="nav-a-tab">
28
+ <div class="tab-pane fade show active" id="nav-a" role="tabpanel" aria-labelledby="nav-a-tab">
29
29
  tab A content
30
30
  </div>
31
31
  <div class="tab-pane fade" id="nav-b" role="tabpanel" aria-labelledby="nav-b-tab">