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> ID的第一个categories，但不适用于<li> ID的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');
});

Answer 2

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

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

Answer 3

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

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

removeClass不适用于两个元素

3 个答案: