Как заставить меню открываться вверх в выпадающем списке?

Question

У меня есть html код ниже

Раскрывающийся список -> О базовом блоге Связаться с пользовательскими инструментами поддержки

Он взят в основном из этого сайта https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_dropdown_filter

This Вот как это выглядит

Выполняет поиск элементов, отображаемых в меню. Теперь я хочу, чтобы это меню открывалось вверх, а не вниз

При просмотре в Интернете я обнаружил, что должен предоставить bottom: 100%; раскрывающееся меню, которое открывается вверх / вверх с чистым css , Теперь в моем случае нет тегов <ul> или <li>. Вот что я сделал

.dropdown {
  position: relative;
  display: inline-block;
  bottom: 100%; //added this
}

Но это ничего не делает. Как заставить меню показывать вверх?

Answer 1

Вы можете сделать это, используя Flexbox :

.dropdown-content.show {
    display: flex;
    flex-direction: column-reverse;
    bottom: 45px; /* hardcoded height of the button */
}

Используя существующий код w3cschool:

/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myFunction() {
  var dropdown, button;
  dropdown = document.getElementById("myDropdown");
  button = document.getElementById("myButton");
  dropdown.classList.toggle("show");
  dropdown.style.bottom = button.offsetHeight + "px";
}

function filterFunction() {
  var input, filter, ul, li, a, i;
  input = document.getElementById("myInput");
  filter = input.value.toUpperCase();
  div = document.getElementById("myDropdown");
  a = div.getElementsByTagName("a");
  for (i = 0; i < a.length; i++) {
    txtValue = a[i].textContent || a[i].innerText;
    if (txtValue.toUpperCase().indexOf(filter) > -1) {
      a[i].style.display = "";
    } else {
      a[i].style.display = "none";
    }
  }
}

.dropbtn {
  background-color: #4CAF50;
  color: white;
  padding: 16px;
  font-size: 16px;
  border: none;
  cursor: pointer;
}

.dropbtn:hover,
.dropbtn:focus {
  background-color: #3e8e41;
}

#myInput {
  box-sizing: border-box;
  background-image: url('searchicon.png');
  background-position: 14px 12px;
  background-repeat: no-repeat;
  font-size: 16px;
  padding: 14px 20px 12px 45px;
  border: none;
  border-bottom: 1px solid #ddd;
}

#myInput:focus {
  outline: 3px solid #ddd;
}

.dropdown {
  position: relative;
  display: inline-block;
  padding-top: 250px; /* just for demo purposes */
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f6f6f6;
  min-width: 230px;
  overflow: auto;
  border: 1px solid #ddd;
  z-index: 1;
  flex-direction: column-reverse; /* show children in a reversed colum (bottom to top) */
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown a:hover {
  background-color: #ddd;
}

.show {
  display: flex;
}

<h2>Search/Filter Dropdown</h2>
<p>Click on the button to open the dropdown menu, and use the input field to search for a specific dropdown link.</p>

<div class="dropdown">
  <button id="myButton" onclick="myFunction()" class="dropbtn">Dropdown</button>
  <div id="myDropdown" class="dropdown-content">
    <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
    <a href="#about">About</a>
    <a href="#base">Base</a>
    <a href="#blog">Blog</a>
    <a href="#contact">Contact</a>
    <a href="#custom">Custom</a>
    <a href="#support">Support</a>
    <a href="#tools">Tools</a>
  </div>
</div>

РЕДАКТИРОВАТЬ:

Я просто удалил жестко запрограммированную высоту кнопки из CSS и вместо этого вычислил высоту, используя Javascript , См. Измененную функцию myFunction() и добавленную id="myButton" в разметке.