使用Javascript功能來突出顯示在鼠標懸停切換及

Question

子鏈接我有一段JS的，突出的合適的子集的鏈接時，您將鼠標懸停在父鏈接。

但現在，我也想使孩子們聯繫的亮點，當我切換（點擊）各自的父鏈接。

另外，我想只有一組孩子聯繫的是在同一時間的亮點。意思是，如果我點擊「家長2」，家長1將關閉，家長2將開啓。

希望這是有道理...

這裏是什麼，我至今要點：

<script type="text/javascript"> 

    // Group 1 
    $('#one').live('mouseover', function(){ 
     $('li.uno').addClass('highlight'); 
    }); 

    $('#one').live('mouseout', function(){ 
     $('li.uno').removeClass('highlight'); 
    }); 

    // Group 2 
    $('#two').live('mouseover', function(){ 
     $('li.dos').addClass('highlight'); 
    }); 

    $('#two').live('mouseout', function(){ 
     $('li.dos').removeClass('highlight'); 
    }); 

    // Group 3 
    $('#three').live('mouseover', function(){ 
     $('li.tres').addClass('highlight'); 
    }); 

    $('#three').live('mouseout', function(){ 
     $('li.tres').removeClass('highlight'); 
    }); 

</script> 


      <ul><!-- Parent Links --> 
       <li id="one"> 
        <a href="#">Parent 1</a>          
       </li> 

       <li id="two"> 
        <a href="#">Parent 2</a>          
       </li> 

       <li id="three"> 
        <a href="#">Parent 3</a>          
       </li>   
      </ul> 


      <ul><!-- Children -->  
       <li class="uno"> 
        <a href="">Link<a/> 
       </li> 

       <li class="tres"> 
        <a href="">Link<a/> 
       </li> 

       <li class="tres"> 
        <a href="">Link<a/> 
       </li> 

       <li class="dos"> 
        <a href="">Link<a/> 
       </li> 

       <li class="uno"> 
        <a href="">Link<a/> 
       </li> 

       <li class="dos"> 
        <a href="">Link<a/> 
       </li>        

      </ul> 

謝謝你的幫助。

Answer 1

選擇元素，如果你正在期待着與大量元素一起工作改變自己的班級可能會很慢。同樣，您可能不希望每次向文檔添加新的父鏈接時都必須更新Javascript。

一個好辦法來解決，這將是改變單一類別的父元素，讓CSS處理所有的子元素的選擇和造型。

我做了一個解決方案，你可以demo at JSFiddle。

Answer 2

向包含所有子女li的ul容器添加一些班級（「子女」）並嘗試使用此代碼。

$('#one').live('click', function(){ 
    $('ul.children li:not(.uno)').slideUp(); 
    $('ul.children li.uno').slideToggle(); 
    return false; 
}); 
$('#two').live('click', function(){ 
    $('ul.children li:not(.dos)').slideUp(); 
    $('ul.children li.dos').slideToggle(); 
    return false; 
}); 
$('#three').live('click', function(){ 
    $('ul.children li:not(.trees)').slideUp(); 
    $('ul.children li.trees').slideToggle(); 
    return false; 
}); 

Demo