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 к удалить Thie класса .hide от родителей, так что список ребенка может быть виден

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

проблема заключается в том, что код работает для пихты st <li> с идентификатором categories, но не работает для <li> с идентификатором personal.

Answer 1

Прежде всего, идентификаторы должны быть уникальными. Измените свои идентификаторы на классы.

$('.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 «s к классам. Тогда это сработает. У вас может быть только один уникальный идентификатор на странице. Поэтому, если вы хотите использовать один и тот же идентификатор для разных элементов, сделайте его как класс.

Здесь: http://jsfiddle.net/y5p8Ldgd/

Answer 3

Вы не можете иметь id с тем же значением в пределах DOM. Таким образом, вам нужно будет изменить на классы для его работы:

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