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

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 .另外，您关闭了 <button>带有 </span> 的标签标记而不是 </button> .