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.

    •  
      CommentAuthoraleare
    • CommentTimeFeb 10th 2010 edited
     permalink
    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 ]
  1.  permalink
    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
    •  
      CommentAuthoraleare
    • CommentTimeFeb 11th 2010
     permalink
    Thank you Ben, works fine!!!
Add your comments
    Username Password
  • Format comments as (Help)