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 class，这样子项列表就可以看到了

$('#parent').mouseover(function() {
    $(this).parent().removeClass('hide');
    $(this).addClass('active');
});
$('#parent').mouseout(function() {
    $(this).removeClass('active');
});

问题是该代码适用于第一个 <li> 和 categories id，但不适用于 <li> 和 personal id。

Answer 1

首先，ID应该是唯一的。将您的 ID 更改为类.

$('.parent').mouseover(function() {
    $(this).parent().removeClass('hide');
    $(this).addClass('active');
});
$('.parent').mouseout(function() {
    $(this).removeClass('active');
});

Answer 2

$('.parent').mouseover(function() {
    $(this).parent().removeClass('hide');
    $(this).addClass('active');
});
$('.parent').mouseout(function() {
    $(this).removeClass('active');
});

li {
max-height: 115px;
overflow: hidden;
transition: max-height 0.4s;
}
.hide { max-height: 15px;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<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>
                <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>
                <ul class="child">
                    <li><a href="/film">Film</a></li>
                    <li><a href="/glitch">Glitch</a></li>
                </ul>
            </li>
        </ul>

将 ID 更改为类。然后它会起作用。每页只能有一个唯一 ID。因此，如果您想对不同的元素使用相同的标识符，请将其设为 class.

此处：http://jsfiddle.net/y5p8Ldgd/

Answer 3

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

removeClass 不适用于两个元素

removeClass doesn't work for two elements

html

css

jquery

removeclass