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>代码。

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

1 个答案: