CODEWITHSUNDEEP
javascriptjqueryhtmlanimation
user1617218
user1617218

Reputation:

Jquery Menu - Submenu toggle

I'm trying to toggle a submenu from a menu link, this is my markup:

<ul id="menu">
<li id="artworks"><a href="#">ARTWORK</a></li>
    <ul class="submenu">
        <img src="../img/submenu.png" alt="submenu" width="62" height="1" />
        <li><a href="#">Sweet Life</a></li>
        <li><a href="#">Pleasure</a></li>
        <li><a href="#">Bienal de la habana</a></li>
        <img src="../img/submenu.png" alt="submenu" width="62" height="1" />
    </ul>
<li id="prensa_nav"><a href="prensa.html">PRENSA</a></li>
<li id="contacto_nav"><a href="contacto.html">CONTACTO</a></li>

and this is my script:

$(function () {

var $submenu = $( '.submenu' );

$( '#artworks a' ).click( function( e ) {
    $submenu.toggle( 'fast' );
    e.preventDefault();
    e.stoppropagation();
} );
});​

I don't know why, but it's not working, it should be pretty simple but it doesn;t work, I have tried everything, please help

Upvotes: 1

Views: 1133

Answers (2)

Paul Fleming
Paul Fleming

Reputation: 24526

You're $submenu variable is out of scope when you trigger the click event. You've mistyped stopPropagation. You're markup is missing a closing <ul>.

Here's a working example

Upvotes: 3

Kevin Boucher
Kevin Boucher

Reputation: 16675

Fix your invalid HTML. Move the submenu UL to be a child of the #artworks list-item.

Upvotes: 1

Related Questions