Fonction Hover pour l'accordéon

Question

Jusqu'ici, vous avez été extrêmement serviable avec moi pour faire fonctionner cette petite chanson. J'ai une autre demande:

Ce balisage:

  <div id="themes"> 
      <h2>Research Themes</h2> 
      <ul> 
       <li class="tier_1"><a class="enviro" href="">Learn about our approach to the <strong>environment</strong></a> 
       <ul class="tier_2 hide"> 
        <li><a href=""><em>How we are tying this all together</em></a></li> 
        <li><a href="off.html"><strong>Project:</strong> Solor Powered Biofactories</a></li> 
        <li><a href=""><strong>Project:</strong> Cleaning Water with Nature</a></li> 
        <li><a href=""><strong>Project:</strong> Higher Efficiency Solar Technology</a></li> 
       </ul> 
       </li> 
       <li class="tier_1"><a class="health" href="">Learn about our approach to <strong>human health</strong></a> 
       <ul class="tier_2 hide"> 
        <li><a href="">Project name numero uno goes here</a></li> 
        <li><a href="">Project name numero dos goes here</a></li> 
        <li><a href="">Project name numero tres goes here</a></li> 
       </ul> 
       </li> 
       <li class="tier_1"><a class="defense" href="">Learn about our approach to <strong>national defense</strong></a> 
       <ul class="tier_2 hide"> 
        <li><a href="">Project name numero uno goes here</a></li> 
        <li><a href="">Project name numero dos goes here</a></li> 
        <li><a href="">Project name numero tres goes here</a></li> 
       </ul> 
       </li> 
      </ul> 
      </div><!-- // end themes --> 

Et cette jQuery:

$(function(){ 
    $(".tier_1 > a").hover(function() { 
    var currentList = jQuery(this).parents('li').find('.tier_2'); 
    $(currentList).slideToggle(); 
    jQuery(this).parents('ul').find('.tier_2').not(currentList).slideUp(); 
    return false; 
    }); 
}); 

Créer ce nifty curseur 'thèmes' vous pouvez voir travailler sur la colonne de droite de cette page: http://clients.pixelbleed.net/biodesign/

J'ai deux problèmes avec cela ... Le hover rétracte le slideUp/down lorsque vous cliquez sur l'un des liens sous un tier_2 ul. Je voudrais qu'il reste diapositive comme quelqu'un qui plane le li imbriqué. Ainsi, la diapositive ne devrait se produire que sur les planeurs pour les éléments tier_1. Je voudrais aussi, en survol, ajouter une classe "active" à l'élément a sur les liens tier_1. Donc, [a class = "enviro" ..] deviendrait, en vol stationnaire, [a class = "enviro active"]. Ceci est ensuite supprimé lorsque l'un des autres éléments de niveau 1 est plané. De cette façon, la jolie icône de couleur peut rester visible pendant que quelqu'un regarde les éléments imbriqués.

Je ne sais même pas si tout cela est possible avec le vol stationnaire, mais je me suis dit que si quelqu'un savait comment il serait ici.

Answer 1

Je pense que vous voulez sans doute avoir un gestionnaire mouseout sur vos thèmes DIV, qui glisse vers le haut tous les uls imbriqués et un gestionnaire mouseover pour chaque tier_1 ancre qui ferme les autres ELU imbriqués et diapositives ouvrir est imbriquée ul. De cette façon, vous n'obtenez la fermeture des panneaux que lorsque vous passez à un autre panneau ou à un div séparé d'eux. Vous pouvez omettre le mouseout si vous vouliez que la dernière sélection dans les thèmes DIV reste sélectionnée.

$(function(){ 
    $('div.themes').mouseout(function() { 
     $('.tier_2:visible').slideUp(); 
     $(this).find('a.active').removeClass('active'); 
    }); 
    $(".tier_1 > a").mouseover(function() { 
    var $this = $(this); 
    $this.closest('div').find('a.active').not($this).removeClass('active'); 
    $this.addClass('active'); 
    var currentList = $this.parents('li').find('.tier_2'); 
    $(currentList).not(':visible').slideDown(); 
    $('.tier_2:visible').not(currentList).slideUp(); 
    return false; 
    }); 
});