6 svar · 647 visningar · startad av bikic
Hej alla!
Jag har en meny som kan se ut så här:
<ul>
<li>Start</li>
<li>Dropdown
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
<li>Drop 3</li>
</ul>
</li>
<li>End</li>
</ul>
Till detta använder jag mig av följande script, som bara är så basic:
$('ul.dropdown ul').css('display', 'none');
$('ul.dropdown li').hover(function () {
$('ul', this).slideDown(250);
}, function () {
$('ul', this).slideUp(250);
});
Vad som händer är att den visar submenyen med slideDownfunktionen, men så fort jag släpper den, så försvinner den bara, den borde göra en slideUp.
Vad gör jag för fel?
var är ul.dropdown i din HTML kod? Är det den första <ul> elementet?
Kan dock inte återskapa det du säger: http://jsbin.com/omika4/
sen räcker det att du skriver:
$('ul.dropdown li').hover(function () {
$('>ul', this).slideToggle(250);
});
Om du skall ha samma hastighet på din slide. (och kört >ul för att köra endast child som är ul mot this).
Jag fick löst det, hade med CSS:en att göra.
Jag fick löst det, hade med CSS:en att göra.
Få man fråga vad du hade för CSS som ställde till detta problem?
Det verkar ju som om "hover" tappar eventet när du rör musen utanför själva <li> ..? Fungerar det likadant oavsett webbläsare? ..det luktar hasLayout. ;)
Testa att binda eventen var för sig med ex. mouseenter och mouseleave istället och se om du får samma resultat. :)
Ex:
$('ul.dropdown li').bind('mouseenter', function(){
$('ul', this).slideDown(250);
}).bind('mouseleave', function(){
$('ul', this).slideUp(250);
});
@Palle:
När man kör $(selector).hover(handlerIn, handleOut) är detsamma som $(selector).mouseenter(handlerIn).mouseleave(handlerOut); ( http://api.jquery.com/hover/ )
just as you know ;)
I know. :moose
@Palle:
När man kör $(selector).hover(handlerIn, handleOut) är detsamma som $(selector).mouseenter(handlerIn).mouseleave(handlerOut); ( http://api.jquery.com/hover/ )
just as you know ;)