Неожиданное поведение изменения высоты CSS с помощью jQuery

Question

У меня есть меню, которое представляет собой список пунктов. Нажатие на элемент делает его «активным» (добавляет к нему класс active) и должно переключать видимость (в данном случае height) других элементов.

По устаревшим причинам,есть 2 слушателя для события щелчка (я знаю).

Моя проблема в том, что при нажатии на элемент предыдущие элементы не исчезают. Например, если я нажму на элемент 3, элементы 1 и 2 не исчезнут, хотя их высота установлена ​​равной 0. Пожалуйста, запустите следующий фрагмент, который, надеюсь, будет понятнее, чем мое объяснение:

$('#menu>li').on('click', function(e) {
	$('#menu>li').removeClass('active');
  $(this).addClass('active');
});

$('#menu>li').on('click', function(e) {
	if (!e.originalEvent) return;
  var clickedItem = e.currentTarget;
  console.log('Clicked on', clickedItem)
  $('#menu>li').each(function (x, i) {
  	console.log(x, i)
    var li = $(i);
    if (!li.hasClass('active')) {
      var newHeight = li.height() <= 0 ? '40px' : '0';
      console.log('setting', newHeight);
      li.height(newHeight);
    } 
  });
});

ul {
  margin-top: 60px;
}

li {
  transition: all 0.2s ease-in-out;
  background: grey;
  color: white;
  height: 0;
}

li.active {
  height: 40px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
  <li class="listElement active">Test me 1</li>
  <li class="listElement" style="padding-left:70px">Test me 2</li>
  <li class="listElement" style="padding-left:140px">Test me 3</li>
  <li class="listElement" style="padding-left:210px">Test me 4</li>
</ul>

Answer 1

Это то, что вы хотите? Я добавил "переполнение: скрыто";в вашем "li" css:

$('#menu>li').on('click', function(e) {
	$('#menu>li').removeClass('active');
  $(this).addClass('active');
});

$('#menu>li').on('click', function(e) {
	if (!e.originalEvent) return;
  var clickedItem = e.currentTarget;
  console.log('Clicked on', clickedItem)
  $('#menu>li').each(function (x, i) {
  	console.log(x, i)
    var li = $(i);
    if (!li.hasClass('active')) {
      var newHeight = li.height() <= 0 ? '40px' : '0';
      console.log('setting', newHeight);
      li.height(newHeight);
    } 
  });
});

ul {
  margin-top: 60px;
}

li {
  transition: all 0.2s ease-in-out;
  background: grey;
  color: white;
  height: 0;
  overflow: hidden;
}

li.active {
  height: 40px;
  background: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
  <li class="listElement active">Test me 1</li>
  <li class="listElement" style="padding-left:70px">Test me 2</li>
  <li class="listElement" style="padding-left:140px">Test me 3</li>
  <li class="listElement" style="padding-left:210px">Test me 4</li>
</ul>

Кстати, это не неожиданно, просто текст переполняется из-за высоты div, равной 0.