Блог

Главная - Вопросы по программированию - Почему мое выпадающее меню не отображается при нажатии?

Почему мое выпадающее меню не отображается при нажатии?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Я хочу делать то, что вы видите на картинке. При нажатии кнопки Настройки открывается это окно, и пользователь переходит к тому, что он хочет. Однако, когда я нажимаю кнопку, ничего не происходит. https://www.hizliresim.com/qqbx1t4 Это работает, когда я копирую часть «li» и вставляю ее в выпадающее меню проектов в Интернете. Я думаю, что проблема в кнопках и тегах ul.

 function settings_click() {
  document.getElementById("settings_dropdown").classList.toggle("Show");
}
window.onclick = function(event) {
  if (!event.target.matches('.settings_style')) {
    var dropdowns = document.getElementsByClassName("settings_tools");
    var i;
    for (i = 0; i < dropdowns.length; i  ) {
      var openDropdown = dropdowns[1];
      if (openDropdown.classList.contains('Show')) {
        openDropdown.classList.remove('Show');
      }
    }
  }
} 
 .settings {
  position: relative;
  display: inline-block;
}

.settings_style {
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: #70757a;
  display: block;
  padding: 15px;
  white-space: nowrap;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  background: none;
  margin: 0;
  box-sizing: border-box;
  align-items: flex-start;
}

.settings_style:hover {
  text-decoration: underline;
}

.settings_tools {
  display: none;
  position: absolute;
  background-color: red;
  overflow: auto;
  z-index: 1;
}

.settings_button {
  min-width: 200px;
}

.li {
  display: list-item;
  list-style: none;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

.search_settings {
  color: #70757a;
  display: block;
  padding: 15px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.Show {
  display: block;
} 
 <div class="settings">
  <button class="settings_style" id="test" onclick="settings_click()" aria-haspopup="true" aria-controls="settings_dropdown">Ayarlar</button>
  <ul class="settings_tools" id="settings_dropdown" role="menu" aria-labelledby="test" style="bottom: 46px; right: 0px; display: none;">
    <li role="none">
      <a class="search_settings" href="https://www.google.com/preferences?hl=tramp;fg=1" role="menuitem" tabindex="-1">Arama ayarları</a>
    </li>
    <li role="none">
      <a class="search_settings" href="/advanced_search?hl=tramp;fg=1" role="menuitem" tabindex="-1">Gelişmiş arama</a>
    </li>
    <li role="none">
      <a class="search_settings" href="https://myactivity.google.com/privacyadvisor/search?utm_source=googlemenuamp;fg=1" role="menuitem" tabindex="-1">Arama'daki verileriniz</a>
    </li>
    <li role="none">
      <a class="search_settings" href="https://myactivity.google.com/product/search?utm_source=googleamp;hl=tramp;fg=1" role="menuitem" tabindex="-1">Arama geçmişi</a>
    </li>
    <li role="none">
      <a class="search_settings" href="https://support.google.com/websearch/?p=ws_results_helpamp;hl=tramp;fg=1" role="menuitem" tabindex="-1">Arama yardımı</a>
    </li>
    <li role="none">
      <button class="search_settings" data-bucket="websearch" role="menuitem" tabindex="-1">Geri bildirim gönder</button>
    </li>
  </ul>
</div>

Ответ №1:

Вот некоторые уточнения. Возможно, вам придется прояснить, что происходит не так, теперь, когда мы видим, что что-то происходит.

 function settings_click() {
  document.getElementById("settings_dropdown").classList.toggle("show");
}

window.onclick = function(event) {
  if (!event.target.classList.contains('settings_style')) {
    var dropdowns = document.getElementsByClassName("settings_tools");

    for (let i = 0; i < dropdowns.length; i  ) {
      dropdowns[0].classList.remove('show');
    }
  }
} 
 .settings {
  position: relative;
  display: inline-block;
}

.settings_style {
  cursor: pointer;
  width: 100%;
  text-align: left;
  color: #70757a;
  display: block;
  padding: 15px;
  white-space: nowrap;
  font-size: 14px;
  font-family: Arial, Helvetica, sans-serif;
  border: none;
  background: none;
  margin: 0;
  box-sizing: border-box;
  align-items: flex-start;
}

.settings_style:hover {
  text-decoration: underline;
}

.settings_tools {
  display: none;
  position: absolute;
  background-color: red;
  overflow: auto;
  z-index: 1;
}

.settings_button {
  min-width: 200px;
}

.li {
  display: list-item;
  list-style: none;
  font-size: 14px;
  margin: 0;
  padding: 0;
}

.search_settings {
  color: #70757a;
  display: block;
  padding: 15px;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  list-style: none;
}

.settings_tools.show {
  display: block !important;
} 
 <div class="settings">
  <button class="settings_style" id="test" onclick="settings_click()" aria-haspopup="true" aria-controls="settings_dropdown">Ayarlar</button>
  <ul class="settings_tools" id="settings_dropdown" role="menu" aria-labelledby="test" style="display: none;">
    <li role="none">
      <a class="search_settings" href="https://www.google.com/preferences?hl=tramp;fg=1" role="menuitem" tabindex="-1">Arama ayarları</a>
    </li>
    <li role="none">
      <a class="search_settings" href="/advanced_search?hl=tramp;fg=1" role="menuitem" tabindex="-1">Gelişmiş arama</a>
    </li>
    <li role="none">
      <a class="search_settings" href="https://myactivity.google.com/privacyadvisor/search?utm_source=googlemenuamp;fg=1" role="menuitem" tabindex="-1">Arama'daki verileriniz</a>
    </li>
    <li role="none">
      <a class="search_settings" href="https://myactivity.google.com/product/search?utm_source=googleamp;hl=tramp;fg=1" role="menuitem" tabindex="-1">Arama geçmişi</a>
    </li>
    <li role="none">
      <a class="search_settings" href="https://support.google.com/websearch/?p=ws_results_helpamp;hl=tramp;fg=1" role="menuitem" tabindex="-1">Arama yardımı</a>
    </li>
    <li role="none">
      <button class="search_settings" data-bucket="websearch" role="menuitem" tabindex="-1">Geri bildirim gönder</button>
    </li>
  </ul>
</div>

Метки: