Schaltfläche für jeden Artikel in der Dropdown-Liste

Question

Ich habe eine Dropdown-Liste und ich möchte eine Schaltfläche für jeden Artikel in der Liste haben. Aber wenn ich auf die Schaltfläche klicken, ist der Fokus auf die Schaltfläche (btn-add-list) weg, so dass die Liste auch weg ist.

Mein Code:

<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:

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

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

Answer 1

Sie müssen stopPropagation() auf Ihre Click-Ereignis hinzuzufügen, um Ereignis klicken, um zu stoppen, um li (im Grunde zu propagieren, wenn Sie klicken, wird nur Taste wird geklickt, nicht li):

<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> 

Lesen Sie mehr über stopPropagation()here. Außerdem haben Sie Ihre <button> Tags mit </span> Tag anstelle von </button> geschlossen.