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

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，文本溢出

。