通过 jQuery 修改 CSS 高度的意外行为

Question

我有一个菜单，它是一个项目列表。单击一个项目使其“处于活动状态”（active向其添加类），并且应该切换height其他项目的可见性（在本例中为）。由于遗留原因，click 事件有 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 导致文本溢出。