问题描述
示例:
所有问题都是因为我需要 stopPropagation() 并尝试这个:
两个下拉菜单仍然打开... 如果打开第二个下拉菜单,我需要先关闭。
我会尽量解释得更好。
我需要并且必须使用 stopPropagation 而这就是这里的全部问题。
我需要一个关于如何使用 stopPropagation 并防止同时打开多个下拉菜单的解决方案
解决方法
您可以存储上次打开的下拉列表并在下次单击时关闭它:
import { BsDropdownDirective } from 'ngx-bootstrap/dropdown';
@Component({
// eslint-disable-next-line @angular-eslint/component-selector
selector: 'demo-dropdown-autoclose',templateUrl: './autoclose.html'
})
export class DemoDropdownAutoCloseComponent {
private lastOpened: BsDropdownDirective = null;
arr: any = [
{ id: 1,name: 'Test one' },{ id: 2,name: 'Test two' },{ id: 3,name: 'Test three' }
];
clickDropdown(event: Event,dropdown: BsDropdownDirective): void {
event.stopPropagation();
if (!!this.lastOpened) {
this.lastOpened.hide();
}
this.lastOpened= dropdown;
}
}
<div class="row" *ngFor="let singleArr of arr">
<div class="col-xs-12 col-12 col-sm-6 mb-3">
<p>Default behavior: dropdown closes after outside click or pressing ESC</p>
<div class="btn-group" dropdown #dropdown="bs-dropdown">
<button id="button-autoclose1" dropdownToggle type="button" class="btn btn-primary dropdown-toggle"
(click)="clickDropdown($event,dropdown)">
Button dropdown <span class="caret"></span>
</button>
<ul id="dropdown-autoclose1" *dropdownMenu class="dropdown-menu" role="menu" aria-labelledby="button-autoclose1">
<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>
</ul>
</div>
</div>
,
// 避免下拉的 JavaScript 代码 // 菜单关闭
// Clicking dropdown button will toggle display
function btnToggle() {
document.getElementById("Dropdown").classList.toggle("show");
}
// Prevents menu from closing when clicked inside
document.getElementById("Dropdown").addEventListener('click',function (event) {
alert("click outside");
event.stopPropagation();
});
// Closes the menu in the event of outside click
window.onclick = function(event) {
if (!event.target.matches('.dropbutton')) {
var dropdowns =
document.getElementsByClassName("dropdownmenu-content");
var i;
for (i = 0; i < dropdowns.length; i++) {
var openDropdown = dropdowns[i];
if (openDropdown.classList.contains('show')) {
openDropdown.classList.remove('show');
}
}
}
}
你能试试这个流程吗