我有一个像这样的嵌套无序列表:
<ul class="nav-list">
<li id="about"><a href="/" class="active">About</a></li>
<li id="categories" class="hide"><a id="parent" href="../" >Projects</a>
<ul class="child">
<li><a href="/kalaja">Hotel Kalaja</a></li>
<li><a href="/alfer">Alfer</a></li>
<li><a href="/xani">Xani Triko</a></li>
<li><a href="/leka">Leka Gas</a></li>
<li><a href="/tuni">Tuni Plast</a></li>
<li><a href="/visari">Visari AM</a></li>
</ul>
</li>
<li id="personal" class="hide"><a href="#" id="parent">Personal</a>
<ul class="child">
<li><a href="/film">Film</a></li>
<li><a href="/glitch">Glitch</a></li>
</ul>
</li>
</ul>
CSS 设置为隐藏子列表
li {
max-height: 115px;
overflow: hidden;
transition: max-height 0.4s;
}
.hide { max-height: 15px;}
然后 jquery 从父类中删除 .hide 类,这样子列表就可以可见了
$('#parent').mouseover(function() {
$(this).parent().removeClass('hide');
$(this).addClass('active');
});
$('#parent').mouseout(function() {
$(this).removeClass('active');
});
问题是代码适用于第一个 <li>
与 categories
id,但不适用于 <li>
与 personal
编号。
最佳答案
在 DOM 中不能有具有相同值的 id
。因此,您需要更改为类才能使其工作:
HTML:
<ul class="nav-list">
<li id="about"><a href="/" class="active">About</a></li>
<li id="categories" class="hide"><a class="parent" href="../" >Projects</a> <!-- note the class instead of id -->
<ul class="child">
<li><a href="/kalaja">Hotel Kalaja</a></li>
<li><a href="/alfer">Alfer</a></li>
<li><a href="/xani">Xani Triko</a></li>
<li><a href="/leka">Leka Gas</a></li>
<li><a href="/tuni">Tuni Plast</a></li>
<li><a href="/visari">Visari AM</a></li>
</ul>
</li>
<li id="personal" class="hide"><a href="#" class="parent">Personal</a> <!-- note the class instead of id -->
<ul class="child">
<li><a href="/film">Film</a></li>
<li><a href="/glitch">Glitch</a></li>
</ul>
</li>
</ul>
jQuery:
$('.parent').mouseover(function() { // note the . instead of #
$(this).parent().removeClass('hide');
$(this).addClass('active');
});
$('.parent').mouseout(function() { // note the . instead of #
$(this).removeClass('active');
});
关于jquery - removeClass 不适用于两个元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32978268/