Блог

На моем сайте есть три выпадающих меню, которые я создал с помощью Bootstrap. В идеале, когда пользователь нажимает на выпадающее меню и выбирает один из пунктов внутреннего меню, выпадающее меню должно обновлять свое текстовое содержимое до текстового содержимого выбранного пункта меню.

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

Мой текущий подход заключается в том, что aria-expanded атрибут для каждой раскрывающейся кнопки изменяется на true , если раскрывающийся список открыт на кнопке. Если aria-expanded значение определенного выпадающего меню равно true , то текстовое содержимое этой кнопки изменяется на текстовое содержимое выбранного пункта меню.

JS

 function addPlanesToDropDowns() {
  let dropdowns = document.querySelector('.dropdown-menu');
  let dropDownButtonOne = document.querySelector('#dropdownMenuButtonOne');
  let dropDownButtonTwo = document.querySelector("#dropdownMenuButtonTwo");
  let dropDownButtonThree = document.querySelector("#dropdownMenuButtonThree");
  dropDownDisabledCheck();

  for (let i = 0; i < state.airplaneData.length; i  ) {
    let dropDownMenuItem = document.createElement('a');
    dropDownMenuItem.classList.add('dropdown-item');
    dropDownMenuItem.href = '#';
    dropDownMenuItem.textContent = state.airplaneData[i].make   " "   state.airplaneData[i].model;

    dropDownMenuItem.addEventListener('click', function (event) {
      event.preventDefault();

      if (dropDownButtonOne.getAttribute('aria-expanded')) {
        dropDownButtonOne.textContent = dropDownMenuItem.textContent;
        dropDownButtonOne.setAttribute('aria-expanded', false);
      }
      if (dropDownButtonTwo.getAttribute('aria-expanded')) {
        dropDownButtonTwo.textContent = dropDownMenuItem.textContent;
        dropDownButtonTwo.setAttribute('aria-expanded', false);
      }
      if (dropDownButtonThree.getAttribute('aria-expanded')) {
        dropDownButtonThree.textContent = dropDownMenuItem.textContent;
        dropDownButtonThree.setAttribute('aria-expanded', false);
      }
      dropDownDisabledCheck();
    });
    dropdowns.appendChild(dropDownMenuItem);
  }
}
  

HTML

        <div class="dropdown">
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonOne" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 1</button>
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonTwo" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 2</button>
            <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButtonThree" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Plane 3</button>
            <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
                <!-- <a class="dropdown-item" href="#">Planes go here</a> -->
            </div>
        </div>
  

Несмотря на это, все три выпадающих меню обновляются с тем же текстовым содержимым выбранного пункта меню, хотя я устанавливаю текстовое содержимое только для элемента button с определенным атрибутом ID.

Этот фрагмент кода dropDownButtonOne.getAttribute('aria-expanded') возвращает строку, а не логическое значение, поэтому либо "true" или "false" .

Поскольку это непустая строка, она всегда принимает значение TRUE . Вам нужно изменить свое условие.

Вы могли бы проверить if(dropDownButtonOne.getAttribute('aria-expanded') === "true") , например.