如何在悬停而不是单击时制作 Twitter Bootstrap (Bootstrap 4 beta) 菜单下拉菜单

Question

如何在悬停而不是点击时制作 Twitter Bootstrap (Bootstrap 4 beta) 菜单下拉菜单

PS：在示例中，我需要将鼠标悬停在子菜单下拉菜单上 这是我的代码 我正在从事一个角度项目（角度 5）和 bootstrap 4 beta 3

    <!-- Header -->

<div>
  <nav id="mainNavbar" class="navbar navbar-expand-lg navbar-light justify-content-end" >

    <div class="{{config.containerType}}">
      <button
        class="navbar-toggler navbar-toggler-right btn"
        type="button" data-toggle="collapse"
        data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
        aria-label="Toggle navigation" (click)="toggleCollapsed()">
        <span class="navbar-toggler-icon"></span>
      </button>
       <!--Logo-->
      <a *ngIf="config.logo" routerLink="{{config.logo.routerLink}}" class="navbar-brand">
        <img src="{{config.logo.src}}" alt="Image Description" class="img-fluid img-res" >
      </a>
       <!--End Logo-->
      <div id="navbarSupportedContent"  [ngClass]="{'collapse': collapsed, 'navbar-collapse': true}">
        <ul *ngIf="config.menu.content" class="navbar-nav text-uppercase" >


          <li *ngFor="let item of config.menu.content" class="menu-item dropdown  ">
            <a >
                  <span dropdown (onShown)="onShown()"
                        (onHidden)="onHidden()"
                        (isOpenChange)="isOpenChange()">
  <a *ngIf="item.routerLink" href dropdownToggle (click)="false" [ngStyle]="item.style" routerLink="{{item.routerLink}}" routerLinkActive="menu-item-active ; selectSlider(item)">{{item.name}}</a>
      <a *ngIf="!item.routerLink" href dropdownToggle (click)="false" [ngStyle]="item.style">{{item.name}}</a>
                    <div *ngIf="item.submenu">
                            <ul *dropdownMenu class="dropdown-menu">
                              <li *ngFor="let choice of item.submenu">
                                <a [ngStyle]="choice.style" class="dropdown-item" routerLink="{{choice.routerLink}}">{{choice.name}}</a>
                              </li>
                            </ul>
                      </div>
                  </span>
            </a>

          </li>

        </ul>


      </div>

    </div>

  </nav>

</div>


<!-- End Header -->

Answer 1

Ng 引导

Ng-Bootstrap 下拉菜单有手动触发选项，它可以让你处理实例之外的操作。

您可以使用导出的以编程方式轻松控制下拉菜单 下拉实例。

<div class="d-inline-block" ngbDropdown #myDrop="ngbDropdown">
  <button class="btn btn-outline-primary" id="dropdownManual" ngbDropdownToggle>Toggle dropdown</button>
  <div ngbDropdownMenu aria-labelledby="dropdownManual">
    <button class="dropdown-item">Action - 1</button>
    <button class="dropdown-item">Another Action</button>
    <button class="dropdown-item">Something else is here</button>
  </div>

  <button class="btn btn-outline-success" (mouseenter)="$event.stopPropagation(); myDrop.open();">Open from outside</button>
  <button class="btn btn-outline-danger" (mouseleave)="$event.stopPropagation(); myDrop.close();">Close from outside</button>
</div>

Ng-Bootstrap dropdown manual triggers

---

Ngx 引导

如果您使用 Ngx-Bootstrap，您可以在组件类中创建一个新的布尔成员，以便通过 mouseenter/mouseleave 来打开/关闭下拉菜单。

这是一个简单的例子：

demo.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-demo',
  templateUrl: './app-demo.component.html'
})
export class DemoComponent {
  private toggle: boolean = false;

  openDropdown(): void {
    this.toggle = true;
  }

  closeDropdown(): void {
    this.toggle = false;
  }

  change(value: boolean): void {
    this.toggle = value;
  }
}

demo.component.html

<div class="btn-group" 
        dropdown 
        [isOpen]="toggle" 
        (mouseenter)="openDropmenu()"
        (mouseleave)="closeDropmenu()"
        (isOpenChange)="change($event)" 
        placement="top">
  <button dropdownToggle type="button" class="btn btn-primary dropdown-toggle">
    Button dropdown <span class="caret"></span>
  </button>
  <ul *dropdownMenu class="dropdown-menu" role="menu">
    <li role="menuitem"><a class="dropdown-item" href="#">Action</a></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Another action</a>
    </li>
    <li role="menuitem"><a class="dropdown-item" href="#">Something else
      here</a></li>
    <li class="divider dropdown-divider"></li>
    <li role="menuitem"><a class="dropdown-item" href="#">Separated link</a>
    </li>
  </ul>
</div>

Ngx-Bootstrap dropdown manual triggers

Answer 2

如果您使用的是 Ngx-Bootstrap，那么最好的解决方案是-

    <div class="btn-group" dropdown triggers="hover" 
  #dp="bs-dropdown" (mouseleave)="dp.hide()">
  <ul *dropdownMenu class="dropdown-menu" role="menu">

以上选项是 Ngx-Bootstrap 库的一部分。