Блог

Пример:

Вся проблема в том, что МНЕ НУЖНО остановить распространение() и попробовать это:

Откройте первый раскрывающийся список, затем откройте второй раскрывающийся список

Оба выпадающих списка все еще открыты… Мне нужно закрыть первый, если открыть второй раскрывающийся список.

Я постараюсь объяснить лучше.

Мне нужно и нужно использовать остановку, и в этом вся проблема.

Мне нужно решение о том, как использовать stopPropagation и при этом не допускать одновременного открытия нескольких раскрывающихся списков

// Код 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');
                }
            }
        }
    }
 

Можете ли вы попробовать этот поток

вы можете сохранить последний открытый раскрывающийся список и закрыть его при следующем щелчке:

 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>