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> 

設置爲隱藏子列表

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

的CSS然後是jQuery來從父級刪除thie。hide類，以便子級列表可見

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

問題是代碼適用於fir st <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。所以如果你想爲不同的元素使用相同的標識符，就把它作爲一個類。

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