Not signed in (Sign In)
SkillShare - A place to discuss Web Standards and Web Design topics
Categories
Vanilla 1.1.9 is a product of Lussumo. More Information: Documentation, Community Support.
-
Hi everybody,
I have this Menu structure:
<ul id="mainmenu">
<li>First Element
<ul style="display:none;">
<li>first sub 1</li>
<li>first sub 2</li>
<li>first sub 3</li>
</ul>
</li>
<li>Second Element
<ul style="display:none;">
<li>second sub 1</li>
<li>second sub 2</li>
</ul>
</li>
</ul>
What I need is the JS code to toggle the UL's inside the LI's to "display:block" when I click on the LI (first or second Elements).
I actually put a LI:HOVER to make the toggle, but the problem is when I get off the mouse the DIV turs to NONE again... and I need it to keep the BLOCK property until I click again on it.
One thing, the Menu structure is fixed, I can't change any element or class or ID on it because is generated by PHP.
Any suggestions?
thanks in advance!!!
[ *aleare ] -
-
CommentAuthorbenjitastic
- CommentTimeFeb 10th 2010
Hi aleare,
You could use jquery and do something like this:$(document).ready(function() {
$("#mainmenu>li").toggle(function() {
$(this).find('ul').css({'display' : 'block'});
}, function() {
$(this).find('ul').css({'display' : 'none'});
});
});
I haven't tested it so that may not work but hopefully it helps.
Ben -
-
Thank you Ben, works fine!!!
1 to 3 of 3