if mouse on hover of div then display menu
Question by PD24
I have the following menu which cascades on hover but i need to add some conditional checks like if the mouse is on hover on the div then keep the menu sliding down.
Also if the mouse is hovered on the LI then check them menu down.
As you can see it just slides down and back up once you leave the “div”.
Im stuck… and have tried for hours searching for if statements etc, i just cant get the syntax correct.
Answer by ShadowScripter
Here is a working example
HTML
<div id="leftWrap">
<div id='accordion'>
<ul>
<li><div>Absorption</div>
<ul style="display: none;">
<li>Accessories</a>
<ul style="display: none;">
<li>AA500AFG</li>
<li>AA500F</li>
<li>AA500G</li>
<li>AA990F</li>
</ul>
</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
<li><div>Fluorescence</div>
<ul style="display: none;">
<li>Accessories</li>
<li>Consumables</li>
<li>Products</li>
</ul>
</li>
</ul>
</div>
</div>
Javascript/JQuery
jQuery(document).ready(function() {
$('#accordion ul > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
});
If you ask me, it gets really messy when you use mousehover/mouseenter for such things. I’d prefer using a click event after the first hover or something, this way the user won’t get annoyed by all that movement.
jQuery(document).ready(function() {
$('#accordion ul:first-child > li').hover(function() {
$(this).children("ul").slideToggle('slow');
});
$('#accordion ul:not(:first-child) > li').click(function(){
$(this).children("ul").slideToggle('slow');
});
});
Answer by Starx
I tried to fiddle in your fiddle, but the markup and css are a lot confusing.
As Rikudo said, you should make the div, its child its much easier to do it that way. I have created a simplest accordion skeleton. You can see it here.
It does everything you want. However for the customizations and others things, I will leave it up to you.
