无法通过 btn-group open 打开下拉按钮组

Posted 2023-03-05

【中文标题】无法通过 btn-group open 打开下拉按钮组

【英文标题】：can't open the dropdown button group by btn-group open

【发布时间】：2020-04-03 11:18:51

【问题描述】：

.open 在 btn-group 类打开下拉列表之后在 bootstrap 4.3 中不起作用....

我想使用该指令来加载没有引导程序的 javascript 的下拉列表..

这是指令：

    @HostBinding('class.open') isOpen = false;
    @HostListener('click') toggleOpen() 
        this.isOpen = !this.isOpen;
    

这是html代码：

 <div class="btn-group" >            
            <button 
            type= "button" 
            class="btn btn-primary dropdown-toggle" >
            Manage Recipe <span class="caret"></span>
        </button>
        <ul class="dropdown-menu">
                <li><a href="#">Add to shopping-list</a></li>
                <li><a href="#">edit recipe</a></li>
                <li><a href="#">delete recipe</a></li>
            </ul>
        </div>

【问题讨论】：

你在哪里需要 .open 类？是在 btn-group div 还是 ul 上？

is not work 你能添加什么不起作用吗？

在 btn-group div 中

【参考方案1】：

data-toggle="dropdown" 在您的按钮控件中丢失。添加后，它应该可以工作。

替换问题中按钮的以下代码行。

<button type= "button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">Manage Recipe <span class="caret"></span>

【讨论】：

这个答案不是很清楚，请你补充一下并包括该行的样子。

添加了所需的更改。请看一下

【参考方案2】：

我通过添加一个查询选择器并访问子级并通过渲染器设置类名来解决这个问题。在引导程序 4 中，open 类被 show 取代。因此使用 show 代替。附上班级ul

如下图：

Dropdown.directive.ts

import  Directive, ElementRef, HostBinding, HostListener, Input, Renderer2  from "@angular/core";

@Directive(
  selector: "[appDropdown]"
)
export class DropdownDirective 

  @Input ("appDropdown") index : number;

  constructor(private theElementRef: ElementRef, private theRenderer: Renderer2)  

  @HostListener("click") toggleDrawer() 
    let elements = this.theElementRef.nativeElement.querySelectorAll('.show');

    if (elements.length > 0) 
      this.theRenderer.removeClass(this.theElementRef.nativeElement.children[this.index], "show");
     else 
      this.theRenderer.addClass(this.theElementRef.nativeElement.children[this.index], "show");
    
  

template.html

<div [appDropdown]="1" class="btn-group">
<button style="width: 100%" class="btn btn-primary dropdown-toggle" type="button">Manage Recipe <span
class="caret"></span></button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Add To Shopping List</a></li>
<li><a class="dropdown-item" href="#">Edit Recipe</a></li>
<li><a class="dropdown-item" href="#">Remove Recipe</a></li>
</ul>
</div>

【参考方案3】：

您不需要所有额外的 HostBinding 语法，也不应该在任何地方监听点击，只在您想要产生效果的特定元素上监听。

TS 文件：

isOpen = false;

HTML：

<div class="btn-group" [ngClass]="'open' : isOpen" (click)="isOpen = !isOpen">
  <button type="button" class="btn btn-primary dropdown-toggle">
            Manage Recipe <span class="caret"></span>
        </button>
  <ul class="dropdown-menu">
    <li><a href="#">Add to shopping-list</a></li>
    <li><a href="#">edit recipe</a></li>
    <li><a href="#">delete recipe</a></li>
  </ul>
</div>

【讨论】：

在我在网上观看的课程中...当他在 btn-group 之后写 open .. 组打开时，这是在他编写指令代码之前...但是当我写开放词时，它什么也不做。这是因为引导版本的变化还是什么？

我现在学习指令，我想试试我看过的例子

【参考方案4】：

我通过将 open 替换为 'show' 来解决问题。

<ul class="dropdown-menu show">

【参考方案5】：

在指令中使用此方法。

import  Directive, HostBinding, HostListener, ElementRef, Renderer2  from 
                                                                     '@angular/core';

@Directive(
 selector: '[appDropdown]'
)

export class DropdownDirective 

constructor(private elRef: ElementRef, private renderer: Renderer2) 
@HostBinding('class.open') isOpen = false;
@HostListener('click') toggleOpen(): void 
this.isOpen = !this.isOpen;
let part = this.elRef.nativeElement.querySelector('.dropdown-menu');
 if (this.isOpen) 
   this.renderer.addClass(part, 'show');
  else 
    this.renderer.removeClass(part, 'show');
  
 

上面的代码 sn-p 将在 bootstrap 4 中工作

 <div class="btn-group" appDropdown>
  <button
    type="button"
    class="btn btn-primary dropdown-toggle"
    data-toggle="dropdown"
    aria-haspopup="true" aria-expanded="false"
    >
    Manage Recipe
  </button>
  <ul  class="dropdown-menu">
    <li class="dropdown-item"><a href="#">To Shopping List</a></li>
    <li class="dropdown-item"><a href="#">Edit Recipe</a></li>
    <li class="dropdown-item"><a href="#">Delete Recipe</a></li>
  </ul>
</div>

【参考方案6】：

在<Component>.ts文件，添加一个属性：

isOpen = false;

然后在相应的 HTML 文件下面添加：

<div class="btn-group" >
    <button
      type="button"
      class="btn btn-primary dropdown-toggle" (click)="isOpen = !isOpen">
      Manage Recipe <span class="caret"></span>
    </button>
    
    <ul class="dropdown-menu" [ngClass]="'show' : isOpen" >
      <li><a href="#">Add to shopping-list</a></li>
      <li><a href="#">edit recipe</a></li>
      <li><a href="#">delete recipe</a></li>
    </ul>
</div>

【参考方案7】：

我遇到了完全相同的问题，所以我通过切换引导程序的版本来解决它。我猜你正在使用最新版本。只需将其降级到 3.3.7。

在 bootstrap 4 中没有类 .open 但在 bootstrap 3 中是。