Как сделать раскрывающееся меню Twitter Bootstrap (бета-версия Bootstrap 4) при наведении, а не при нажатии

Как сделать раскрывающееся меню Twitter Bootstrap (бета-версия Bootstrap 4) при наведении, а не при нажатии

PS: в качестве примера мне нужно навести курсор на раскрывающееся меню подменю, вот мой код, который я работаю над проектом angular (angular 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 -->

angular dropdown twitter-bootstrap bootstrap-4 ngx-bootstrap
person Ferdaous Ben Salha    schedule 22.01.2018    source источник
comment
Это то, что тебе надо? stackoverflow.com/questions/42183672/   -  person ild flue    schedule 22.01.2018
comment
нет, это не сработало, плюс мне нужно решение без jquery   -  person Ferdaous Ben Salha    schedule 22.01.2018
comment
Опубликуйте код, который у вас есть до сих пор   -  person Zim    schedule 23.01.2018
comment
Выполнено!! я обновил пост   -  person Ferdaous Ben Salha    schedule 23.01.2018
comment
Возможный дубликат Как реализовать всплывающее меню Navbar в Bootstrap v4?   -  person tao    schedule 10.12.2018

Ответы (2)


arrow_upward
0
arrow_downward

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-Bootstrap

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;
  }
}

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

person Zeev Katz    schedule 22.01.2018
comment
спасибо, но мне приходится работать только с ngx-bootstrap - person Ferdaous Ben Salha; 23.01.2018
comment
@FerdaousBenSalha Дополнительное объяснение о ngx-bootstrap - person Zeev Katz; 23.01.2018
comment
Я использую ngx bootstrap, чтобы использовать компоненты Bootstrap на базе Angular и избегать кода js и jquery. Я использую последнюю версию v 2.0.1 valor-software.com/ngx- bootstrap/#/начало работы - person Ferdaous Ben Salha; 23.01.2018
comment
@FerdaousBenSalha Посмотрите мой второй раздел о ngx-bootstrap - person Zeev Katz; 23.01.2018

arrow_upward
0
arrow_downward

Если вы используете Ngx-Bootstrap, то лучшим решением будет:

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

Вышеупомянутые параметры являются частью библиотеки Ngx-Bootstrap.

person VISHAL SINGH    schedule 14.05.2020