드롭 다운 목록에있는 각 항목의 버튼

Question

나는 드롭 다운 목록을 가지고 있으며 목록의 각 항목에 대한 버튼을 갖고 싶습니다. 그러나 버튼을 클릭하면 버튼 (btn-add-list)에 대한 포커스가 사라지고 목록도 사라집니다.

내 코드 :

<button class="btn-add-list><i class="material-icons">note_add</i></button> 
<ul id="dropdown-add-list"> 
    <li class="list-item">List 1 
     <button (click)="addItemToList('list')">+</button> 
    </li> 

    <li >List 2 
     <button (click)="addItemToList('list')">+</button> 
    </li> 
</ul> 

CSS :

당신이 클릭 할 때, 기본적으로 ( li에 전파 할 이벤트를 클릭 중지하기 위해 귀하의 클릭 이벤트에 stopPropagation()를 추가 할 필요가

.btn-add-list:focus ~ #dropdown-add-list{ 
    display: bloc; 
} 

#dropdown-add-list{ 
display:none; 
position: relative:; 
..... 
} 

Answer 1

만 버튼이 클릭됩니다.

<li class="list-item">List 1 
    <button (click)="addItemToList('list');$event.stopPropagation()">+</button> 
</li> 

<li >List 2 
    <button (click)="addItemToList('list');$event.stopPropagation()">+</button> 
</li> 

stopPropagation()here에 대해 자세히 알아보십시오. 또한 <button> 태그를 </button> 대신 </span> 태그로 닫았습니다.