下拉列表中每个项目上的按钮

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:

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

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

Answer 1

您需要将stopPropagation() 添加到您的点击事件中，以阻止点击事件传播到li（基本上，当您点击时，只会点击按钮，而不是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>

阅读更多关于 stopPropagation() here 的信息。此外，您使用</span> 标签而不是</button> 关闭了<button> 标签。