How To Make Jquery Submenu Stay Visible After It Is Clicked?
<p>I have read similar posts but as I am not very good with jquery I need more specific help with my menu. </p>

<pre><code>&lt;div id="nav"&gt;&lt;!--// START NAV //--&gt;
    &lt;dl id="nav"&gt;
        &lt;dt class="nav"&gt;&lt;b&gt;ONE&lt;/b&gt;&lt;/dt&gt;
        &lt;dd&gt;
            &lt;ul&gt;
                &lt;li&gt;&lt;a href="/A"&gt;A&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/B"&gt;B&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/C"&gt;C&lt;/a&gt;&lt;/li&gt;

            &lt;/ul&gt;
        &lt;/dd&gt;
        &lt;dt class="nav"&gt;&lt;b&gt;TWO&lt;/b&gt;&lt;/dt&gt;
        &lt;dd&gt;
            &lt;ul class="nav"&gt;
                &lt;li&gt;&lt;a href="/D"&gt;D&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="/E"&gt;E&lt;/a&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;a href="/F"&gt;F&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
        &lt;/dd&gt;

    &lt;/dl&gt;
        &lt;/div&gt;&lt;!--// END NAV //--&gt;
</code></pre>

<p>Here is the JS I am using. </p>

<pre><code>&lt;script type="text/javascript"&gt;
$(document).ready(function(){
    if($("#nav")) {
        $("#nav dd").hide();
        $("#nav dt.nav b").click(function() {
            if(this.className.indexOf("clicked") != -1) {
                $(this).parent().next().slideUp(200);
                $(this).removeClass("clicked");
            }
            else {
                $("#nav dt.nav b").removeClass();
                $(this).addClass("clicked");
                $("#nav dd:visible").slideUp(200);
                $(this).parent().next().slideDown(500);
            }
            return false;
        });
    }
});
&lt;/script&gt;
</code></pre>

<p>Thanks</p>
