css ngb下拉菜单在我单击其中一个项目后未关闭

fjnneemd 于 2023-06-07 发布在其他

关注(0)|答案(3)|浏览(148)

我使用ngb下拉列表来显示任务的不同状态（“待办”、“进行中”、“完成”）。一切都很好，但有一个小问题仍然困扰着我。单击其中一个选项后，我希望下拉菜单关闭。目前它仍然开放。单击此菜单时如何关闭它？

正如你在下面看到的，我改变了两篇文章的状态，但下拉菜单仍然打开，这不是我真正想要的东西

模板编码

<div class="col-md-4 text-right padding-topright" style=" object-fit: cover;">
                    <div ngbDropdown class="d-inline-block">
                      <button class="btn btn-sm kbn-todo" *ngIf="post.task.status == 'to do'" id="dropdownDone" style=" color: white;"
                      ngbDropdownToggle>{{post.task.status}}</button>
                      <button class="btn btn-sm kbn-working" *ngIf="post.task.status == 'in progress'" id="dropdownDone" style=" color: white;"
                      ngbDropdownToggle>{{post.task.status}}</button>
                      <button class="btn btn-sm kbn-done" *ngIf="post.task.status == 'done'" id="dropdownDone" style=" color: white;"
                      ngbDropdownToggle>{{post.task.status}}</button>
                      <div ngbDropdownMenu aria-labelledby="dropdownToDo">
                        <button class="dropdown-item pumpkin-orange-bg" (click)="OnMarkTaskToDo(i, this.post._id)">To Do</button>
                        <button class="dropdown-item" (click)="OnMarkTaskInProgress(i, this.post._id)">In Progress</button>
                        <button class="dropdown-item" (click)="OnMarkTaskCompleted(i, this.post._id)">Done</button>
                      </div>
                    </div>
                    <p class="small font-weight-bold" style="margin-top: 5px" *ngIf="post.task?.due_to != 'Invalid date'"> due {{post.task?.due_to | date}}</p>
                    <!-- <p class="small font-weight-bold" style="margin-top: 5px"> status- {{post.task?.status}}</p> -->

                  </div>

css

来源：https://stackoverflow.com/questions/54041558/ngbdropdown-menu-doesnt-close-after-i-clicked-one-of-its-items

3条答案

按热度按时间

ekqde3dh1#

你可以这样做：

<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
  <button class="btn btn-outline-primary mr-2" id="dropdownManual" ngbDropdownAnchor (focus)="myDrop.open()">Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownManual">
    <button ngbDropdownItem>Action - 1</button>
    <button ngbDropdownItem>Another Action</button>
    <button ngbDropdownItem>Something else is here</button>
  </div>
</div>

<button class="btn btn-outline-danger mr-2" (click)="myDrop.close();">Close from outside</button>

仔细看看：

#myDrop="ngbDropdown"

并且：

(click)="myDrop.close();"

我想有很多人会喜欢这个解决方案。
这是一个取自以下内容的示例：https://ng-bootstrap.github.io/#/components/dropdown/examples

赞(0）回复(0）举报 2023-06-07

h5qlskok2#

如果你的问题是关于CSS/HTML，你只需要在菜单容器中应用一些东西，比如display: none。
但是你的问题是关于Angular的，你需要这样的东西：

showMenu: boolean = false;

closeMenu() {
  let displayMenu = showMenu ? true : false;
  return displayMenu;
}

<div class="menu-container" *ngIf="showMenu">
<button class="close-menu" (click)="closeMenu()"></button>
</div>

这个过程可以以非常不同的方式完成，一切都取决于你想要如何工作，用动画，用全局事件单击菜单的“退出”，然后菜单消失，然后在...
我希望这些例子能让你的道路更加清晰。

赞(0）回复(0）举报 2023-06-07

mrwjdhj33#

使用autoClose指令防止关闭下拉列表

<div ngbDropdown class="d-inline-block" [autoClose]="false">

赞(0）回复(0）举报 2023-06-07

我来回答

css ngb下拉菜单在我单击其中一个项目后未关闭

3条答案

相关问题

热门标签

最新问答