如何使Twitter Bootstrap(Bootstrap 4 beta)菜单下拉菜单悬停而不是点击

Question

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

PS：我需要在示例中将鼠标悬停在子菜单下拉菜单上这是我的代码我正在处理一个角度项目(角度 5(和引导程序 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-Bootstrap

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-引导下拉手动触发器

---

Ngx-Bootstrap

如果您使用的是 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;
  }
}

演示组件.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-引导下拉手动触发器

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 库的一部分。