jquery - removeClass 不适用于两个元素

Question

我有一个像这样的嵌套无序列表:

<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编号。

Answer 1

在 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');
});