Bootstrap:下拉切换项目在 Safari 中不起作用
Bootstrap: dropdown toggle items not functioning in Safari
我有一个 angular 2 应用程序,它使用 bootstrap 3.3.7 和 jquery 1.12.4。代码如下:
<div class="btn-group">
<button type="button" class="btn dropdown-toggle"
title="More actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
>
<span class="sr-only">More actions</span>
<i class="fa fa-ellipsis-v fa-lg" ></i>
</button>
<ul class="dropdown-menu dropdown-menu-right menu" role="menu">
<li>
<button *ngIf="itemViewModel.IsCopy !== true" type="button" class="btn dropdown-button" (click)="Copy($event)" title="Copy"
>
<i class="fa fa-files-o" (click)="Copy($event)"></i>
Copy
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="Move($event)" title="Move">
<i class="fa fa-arrows" (click)="Move($event)"></i>
Move
</button>
</li>
<li>
<button *ngIf="itemViewModel.IsShare !== true" type="button" class="btn dropdown-button" (click)="Share($event)" title="Share">
<i class="fa fa-share " (click)="Share($event)"></i>
Share
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="removeItem($event)" title="Delete">
<i class="fa fa-trash" (click)="removeItem($event)"></i>
Delete
</button>
</li>
</ul>
</div>
下拉菜单显示正常。但是单击列表中的各个按钮不会调用关联的事件处理程序。此问题在 iOS 上的 Safari 浏览器和 Android 上的 Chrome 上出现。但是,它在 Edge 上完美运行,在 laptop/desktop.
上完美运行 Chrome
我在 Whosebug 和 github 上尝试了为早期版本 Bootstrap 提供的各种解决方案,但它们都不起作用。
如何让它工作?
我使用 ng2-bootstrap 的下拉菜单解决了这个问题 --> https://github.com/valor-software/ng2-bootstrap
我有一个 angular 2 应用程序,它使用 bootstrap 3.3.7 和 jquery 1.12.4。代码如下:
<div class="btn-group">
<button type="button" class="btn dropdown-toggle"
title="More actions" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
>
<span class="sr-only">More actions</span>
<i class="fa fa-ellipsis-v fa-lg" ></i>
</button>
<ul class="dropdown-menu dropdown-menu-right menu" role="menu">
<li>
<button *ngIf="itemViewModel.IsCopy !== true" type="button" class="btn dropdown-button" (click)="Copy($event)" title="Copy"
>
<i class="fa fa-files-o" (click)="Copy($event)"></i>
Copy
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="Move($event)" title="Move">
<i class="fa fa-arrows" (click)="Move($event)"></i>
Move
</button>
</li>
<li>
<button *ngIf="itemViewModel.IsShare !== true" type="button" class="btn dropdown-button" (click)="Share($event)" title="Share">
<i class="fa fa-share " (click)="Share($event)"></i>
Share
</button>
</li>
<li>
<button type="button" class="btn dropdown-button" (click)="removeItem($event)" title="Delete">
<i class="fa fa-trash" (click)="removeItem($event)"></i>
Delete
</button>
</li>
</ul>
</div>
下拉菜单显示正常。但是单击列表中的各个按钮不会调用关联的事件处理程序。此问题在 iOS 上的 Safari 浏览器和 Android 上的 Chrome 上出现。但是,它在 Edge 上完美运行,在 laptop/desktop.
上完美运行 Chrome我在 Whosebug 和 github 上尝试了为早期版本 Bootstrap 提供的各种解决方案,但它们都不起作用。
如何让它工作?
我使用 ng2-bootstrap 的下拉菜单解决了这个问题 --> https://github.com/valor-software/ng2-bootstrap