В чем подвох этого кода?

Question

function drop() {
  let dr = document.querySelector('.DropDown')

  if (dr.style.height == "0px") {
    dr.style.height = "160px"
  } else if (dr.style.height == "160px") {
    dr.style.height = "0px"
  }
}

#Services {
  position: relative;
}

#DropDown {
  list-style: none;
  display: none;
  position: absolute;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  width: 150px;
  left: -3px;
  transition: 0.3s;
}

#DropDown>li {
  margin: 10px;
  margin-left: 10px;
  transition: 0.3s;
}

<li id="Services" onclick="drop()">Services
  <ul id="DropDown" class="DropDown">
    <li id="Page1">I Page</li>
    <li id="Page2">II Page</li>
    <li id="Page2">III Page</li>
    <li id="Page2">IV Page</li>
  </ul>
</li>

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

//пробовал и с вашими поправками но не работает, в инете есть скрипты для этого но хочу понять что с этим скриптом

Answer 1

Было бы гораздо лучше использовать класс в качестве признака, иначе при быстром нажатии будет глючить (этот способ ведь ради анимации выбран?).

Но всё же:

Вместо сравнения присваивание.
Объект со строкой сравнивать - гиблое дело. Надо либо брать .cssText, либо атрибут, а не свойство.
В случае cssText после двоеточия браузер, вероятно, ставит пробел. По крайней мере такое поведение я вижу в Хроме.
Можно проверять непосредственно .style.height.

Answer 2

function drop() {
  let dr = document.querySelector('.DropDown');
  let style = getComputedStyle(dr);
  dr.style.display = style.display == 'none'? 'block' : 'none';
}

#Services {
  position: relative;
  display:block;
}

#DropDown {
  list-style: none;
  display: none;
  position: absolute;
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0) 100%);
  width: 150px;
  left: -3px;
  transition: 0.3s;
}

#DropDown>li {
  margin: 10px;
  margin-left: 10px;
  transition: 0.3s;
}

<li id="Services" onclick="drop()">Services
  <ul id="DropDown" class="DropDown">
    <li id="Page1">I Page</li>
    <li id="Page2">II Page</li>
    <li id="Page2">III Page</li>
    <li id="Page2">IV Page</li>
  </ul>
</li>

БЛОГ НА HUSL

В чем подвох этого кода?

Ответы (2 шт):