Я не могу закрыть раскрывающееся меню в LWC, щелкнув любое другое место на странице, кроме раскрывающегося меню. Пожалуйста, найдите код ниже,

HTML-код:

<a class="userStyle" role="button" href="#" onclick={displayUser}></a>
                            <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
                                <a class="dropdown-item drop-down" href={profileURL}>User Profile</a>
                                <a class="dropdown-item drop-down" href={STCURL}>Service Terms &amp; Conditions</a>
                                <a class="dropdown-item drop-down" href={logoutURL}>Logout</a>
                            </div>

Код Javascript:

 displayUser(e) {
    e.preventDefault();
    let displayStyle = this.template.querySelector("div.dropdown-menu").style
      .display;
    if (displayStyle === "none" || displayStyle === "") {
      this.template.querySelector("div.dropdown-menu").style.display = "block";
    } else {
      this.template.querySelector("div.dropdown-menu").style.display = "none";

    }
  }

Код JavaScript, который я пытаюсь добавить для закрытия вышеупомянутого раскрывающегося списка при внешнем щелчке в функции ConnectedCallback():

connectedCallback() {
    window.addEventListener("mouseup" , (e) => {
      console.log("Into mouseup");
      let dropdown =  this.template.querySelector("div.dropdown-menu");
      if(e.target != dropdown && e.target.parentNode != dropdown) {
        console.log("Into If");
        dropdown.style.display = 'none';
      }
    });
}

Примечание. Вышеупомянутая функция addEventListener выполняется при всех кликах по странице, но не позволяет мне открыть само раскрывающееся меню, поскольку функция If также выполняется для щелчка тега привязки Actual Dropdown, что препятствует открытию раскрывающегося списка.

Пожалуйста, помогите относительно того же и дайте мне знать, если вам нужна дополнительная информация о том же.

2
M SAI SHYAM MANOHAR 2 Май 2020 в 14:26

1 ответ

Чтобы открыть раскрывающийся список, вы использовали обработчик onclick. Из вашего описания раскрывающийся список должен исчезнуть при нажатии за пределами этого элемента привязки.

Обработайте событие, когда якорь теряет фокус, добавив к якорю обработчик onblur. Этот обработчик событий должен выполнять логику, которая скрывает раскрывающийся список.

Это решение само по себе имеет недостатки, такие как потеря фокуса привязки, если вы нажмете TAB.

0
akiradev 3 Май 2020 в 11:43