toggled slide-down blocknav on/off

by Scott Godin

HTML

<nav id="topnav">
    <ul>
        <li class="top">Info
            <ul>
                <li><a href="#">more info</a></li>
                <li><a href="#">blog</a></li>
                <li><a href="#">events</a></li>
                <li><a class="newwindow" href="#">store</a></li>
                <li><a href="#">video</a></li>
            </ul>
        </li>
        <li class="top">Pets
            <ul>
                <li><a href="#">All Pets</a></li>
                <li><a href="#">cat</a></li>
                <li><a href="#">dog</a></li>
                <li><a class="newwindow" href="#">bird</a></li>
                <li><a href="#">fish</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

#topnav ul { list-style-type: none; }
#topnav li { font-weight: bold; padding:  0.66em; }
#topnav ul > li { border: 1px solid black; border-radius: 0.8em; margin: 4px 0; }
#topnav ul li ul { display: none; }
#topnav ul li ul.active { display: block; }
#topnav a { text-decoration: none; padding: 0.66em; display: block;}

JavaScript

$( function () { 
    $("#topnav ul > li.top").click (
        function (e) { 
            $(this).find("ul").toggleClass('active');
            e.preventDefault();
        }
    );
   $("#topnav li.top li a").click ( 
       function (e) { 
           e.stopPropagation() ;
           if ($(this).hasClass("newwindow") ) {
               alert( this.href + " (newwindow)" );
               //window.open( this.href, "_blank" );
           }
           else {
               alert( this.href );
               //window.open( this.href );
           }
       }
    );
});