vol stationnaire état

Question

Dropdown

HTML:

<ul class="dropdown"> 
    <li><a href="#">Item 1</a></li> 
    <li> 
     <a href="#">Item 2</a> 
     <div class="submenu">something</div> 
    </li> 
</ul> 

jQuery:

$j("ul.dropdown li").hover(function() { 
     $j(this).addClass("hover"); 
     $j('div.submenu', this).css('visibility', 'visible').hover(function() { 
       $j(this).prev('a').addClass('hover'); 
      }, function() { 
       $j(this).prev('a').removeClass('hover'); 
      });  
    }, function() { 
     $j(this).removeClass("hover"); 
     $j('div.submenu', this).css('visibility', 'hidden'); 
    }); 

... le menu fonctionne très bien, mais le lien de navigation (qui ouvre le menu déroulant) doit rester en surbrillance lorsque le dropped- menu bas. Comment puis-je maintenir l'état hover sur le lien et le sous-menu quand ils sont ouverts?

Merci!

Answer 1

Essayez quelque chose comme ceci:

$j("ul.dropdown li").hover(function() { 
    $j(this).children('a').andSelf().addClass("hover"); 
    $j('div.submenu', this).css('visibility', 'visible'); 
}, function() { 
    $j(this).children('a').andSelf().removeClass("hover"); 
    $j('div.submenu', this).css('visibility', 'hidden'); 
}); 

Si vous ne avez pas besoin explicitement visibility et display fonctionnera, vous pouvez le faire:

$j("ul.dropdown li").hover(function() { 
    $j(this).children('a').andSelf().addClass("hover"); 
    $j('div.submenu', this).show(); 
}, function() { 
    $j(this).children('a').andSelf().removeClass("hover"); 
    $j('div.submenu', this).hide(); 
}); 

Answer 2

Si vous utilisez visibility: hidden au lieu de display: none, la page réservera l'espace visuel que l'élément doit occuper, ce qui n'est généralement pas ce qui est souhaité avec un menu imbriqué

Si visibility est ce que vous voulez, ignorez-moi. Sinon, voici une alternative qui utilise display (qui maintient chaque élément sélectionné dans la hiérarchie a mis en évidence, ce qui semblait être ce que votre question demandait):

style

li.hover { background: #eee; } 
li.hover ul { background: #fff; } 
ul ul { display: none; } 

HTML

<ul> 
    <li><a href="#">Item 1</a></li> 
    <li> 
     Item 2 
     <ul> 
      <li><a href="#">Item 2.a</a></li> 
      <li> 
       Item 2.b 
       <ul> 
        <li><a href="#">Item 2.b.1</a></li> 
       </ul> 
      </li> 
     </ul> 
    </li> 
    <li><a href="#">Item 3</a></li> 
</ul> 

jQuery

$(function() { 
    $("ul li").hover(
     function() { 
      $(this).addClass("hover").children("ul").show(); 
     }, 
     function() { 
      $(this).removeClass("hover").children("ul").hide(); 
     } 
    ); 
});