Accordion Menu on prototype site - Submenu items collapse on click -- I don't want this_问答_开发者

I'm working on a prototype site and the client just wants to see how the nav will work. I'm building an accordion with sprites and I need for the submenu items to not close the entire submenu when they are clicked. I have already applied some JQuery and I'm happy with how it's working so far... I would like to expand on that code. Right now the accordion has an active class on the first menu item to keep that menu item open on pageload. The other part of the Javascript is modifying existing classes to make it so the class keeps the menu item highlighted when clicked. I want the same thing to happen on the neighborhood submenu and I want the submenu items to hover and not close the menu when clicked. Here is the relevant code so far:

<ul id="accordion">
    <li>
        <a href="#" class="history_heading" rel="history_heading">HISTORY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="geography_heading" rel="geography_heading">GEOGRAPHY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="neighborhoods_heading" rel="neighborhoods_heading">NEIGHBORHOODS</a>
        <ul id="neighborhoods_levelone_drop">
            <li><a href="#" class="arbutus" rel="Tus">Ridge</a></li>
            <li><a href="#" class="local_news" rel="local_news">Local News</a></li>
            <li><a href="#" class="local_events" rel="local_events">Local Events</a></li>
            <li><a href="#" class="local_projects" rel="local_projects">Local Projects</a></li>
            <li><a href="#" class="neighborhood_services" rel="neighborhood_services">Neighborhood Services</a></li>
            <li><a href="#" class="area_information" rel="area_information">Area Information</a></li>
            <li><a href="#" class="photo_gallery" rel="area_information">Photo Gallery</a></li>
                <li>
                <ul>
                    <li><a href="#">Park</a></li>
                    <li><a href="#">Downtown</a></li>
                    <li><a href="#">Downtown Eastside</a></li>
                    <li><a href="#">Dun-South</a></li>
                    <li><a href="#">Park</a></li>
                    <li><a href="#">Faw</a></li>
                    <li><a href="#">Randview-Woods</a></li>
                    <li><a href="#">Stings-Sunrise</a></li>
                    <li><a href="#">Ton-Cedar</a></li>
                    <li><a href="#">Risdale</a></li>
                    <li><a href="#">Karney</a></li>
                    <li><a href="#">Park</a></li>
                    <li><a href="#">Silano</a></li>
                    <li><a href="#">Pole</a></li>
                    <li><a href="#">Leasant</a></li>
                    <li><a href="#">Oak</a></li>
                    <li><a href="#">Frew</a></li>
                    <li><a href="#">Rile</a></li>
                    <li><a href="#">Shaughn</a></li>
                    <li><a href="#">Bambie</a></li>
                    <li><a href="#">Cona</a></li>
                    <li><a href="#">Sunset</a></li>
                    <li><a href="#">Fraser</a></li>
                    <li><a href="#">Wes</a></li>
                    <li><a href="#">Point</a></li>
                </ul>
            </li>
        </ul>
    </li>

    <li>
        <a href="#" class="things_to_do_heading" rel="things_to_do_heading">THINGS TO DO</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="moving" rel="moving_heading">MOVING</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="population_heading" rel="population_heading">POPULATION</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="weather_heading" rel="weather_heading">WEATHER</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>

    <li>
        <a href="#" class="education_heading" rel="education_heading">EDUCATION</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>开发者_运维技巧;
        </ul>
    </li>

    <li>
        <a href="#" class="health_heading" rel="health_heading">HEALTH</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>
    <li>
        <a href="#" class="cemetery_heading" rel="cemetery_heading">CEMETERY</a>
        <ul>
            <li><a href="#">Link One</a></li>
            <li><a href="#">Link Two</a></li>
            <li><a href="#">Link Three</a></li>
            <li><a href="#">Link Four</a></li>
            <li><a href="#">Link Five</a></li>
        </ul>
    </li>
</ul>

And the javascript goes like this:

<script type="text/javascript">
$(document).ready(function () {

    $('#accordion li').children('ul').hide();
    $('.history_heading:first').addClass('active').next().show();

    $('#accordion li').click(function () {
        if ($(this).children('a:first:not(".active")')) {
            $('a.history_heading').removeClass('active');
        }
        $('#accordion li').children('ul').slideUp('fast');
        $('#accordion li > a').each(function () {
            if ($(this).attr('rel')!='') {
                $(this).removeClass($(this).attr('rel') + 'Over');
            }
        });
        $(this).children('ul').slideDown('fast');
        $(this).children('a').addClass($(this).children('li a').attr('rel') + 'Over');
        return false;
     });
});
</script>

So in #neighborhoods_levelone_drop I want those links in that list to hover and not close the menu when clicked. And I want the Photo_Gallery list to be able to open and for the Photo Gallery heading to stay highlighted. I hope this isn't too complicated :s

I hope someone can help!!

I took a stab at it here:

http://jsfiddle.net/jtbowden/km7dS/

I made this universal, so you don't have to depend on particular class names (other than "active").

Also, I had to modify the neighborhood submenu slightly to work with my code. I don't think it was organized correctly.