原型网站上的手风琴菜单 - 子菜单项在单击时折叠 - 我不想要这个

Question

我正在开发一个原型网站，客户只是想看看导航如何工作。我正在构建一个带有精灵的手风琴，我需要子菜单项在单击时不要关闭整个子菜单。我已经应用了一些 JQuery，并且我对它到目前为止的工作方式感到满意...我想扩展该代码。现在，手风琴在第一个菜单项上有一个活动类，以保持该菜单项在页面加载时打开。 Javascript 的另一部分是修改现有的类，以便该类在单击时保持菜单项突出显示。我希望在附近的子菜单上发生同样的事情，并且我希望子菜单项悬停并且在单击时不关闭菜单。以下是到目前为止的相关代码：

<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>

javascript 如下所示：

<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> 

因此，在 #neighborhoods_levelone_drop 中，我希望该列表中的这些链接悬停，并且在单击时不关闭菜单。我希望 Photo_Gallery 列表能够打开，并且 Photo Gallery 标题保持突出显示。我希望这不是太复杂：

我希望有人可以提供帮助！

Answer 1

我在这里尝试了一下：

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

我做了这是通用的，因此您不必依赖特定的类名称（“active”除外）。

另外，我必须稍微修改邻居子菜单才能使用我的代码。我认为它的组织不正确。