Удалить добавленный JQuery активный класс после нажатия на другой пункт меню в аккордеоне - PullRequest
Новая
       81

Удалить добавленный JQuery активный класс после нажатия на другой пункт меню в аккордеоне

1 голос
/ 23 марта 2011

У меня проблема с тем, что я использовал Jquery для добавления активного класса в пункт меню аккордеона при загрузке страницы. Теперь я хотел бы удалить этот активный класс, когда пользователи переходят на другой заголовок меню. Вот Javascript и HTML ниже. Если вам нужно больше кода, дайте мне знать!:

JAVASCRIPT ---------------------------------------------- ---------------------------------- 

<title>Untitled Document</title>
<link rel="stylesheet" href="/CoVPrototype/css/CoV_style.css" type="text/css" />
<script type="text/javascript" src="/CoVPrototype/js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="/CoVPrototype/js/jquery.easing.1.2.js"></script>
<script type="text/javascript">
$(document).ready(function () {

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

    $('#accordion li').click(function () {
        $('#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>

и вот HTML: ----------------------------------------- ----------------------------- 

<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>
            <li><a href="#">Ridge</a></li>
            <li><a href="#">Local News</a></li>
            <li><a href="#">Local Events</a></li>
            <li><a href="#">Local Projects</a></li>
            <li><a href="#">Neighborhood Services</a></li>
            <li><a href="#">Area Information</a></li>
            <li><a href="#">Photo Gallery</a></li>
                <ul>
                    <li><a href="#">Park</a></li>
                    <li><a href="#">Downtown</a></li>
                    <li><a href="#">Downtown East</a></li>
                    <li><a href="#">Dunbar-South</a></li>
                    <li><a href="#">Park Place</a></li>
                    <li><a href="#">Fairway</a></li>
                    <li><a href="#">Woodland</a></li>
                    <li><a href="#">HSunrise</a></li>
                    <li><a href="#">Cedar</a></li>
                    <li><a href="#">Dale</a></li>
                    <li><a href="#">Arney</a></li>
                    <li><a href="#">Parkinson</a></li>
                    <li><a href="#">Lano</a></li>
                    <li><a href="#">Marle</a></li>
                    <li><a href="#">Mount</a></li>
                    <li><a href="#">Oak</a></li>
                    <li><a href="#">Wood</a></li>
                    <li><a href="#">Riley</a></li>
                    <li><a href="#">NEW</a></li>
                    <li><a href="#">South </a></li>
                    <li><a href="#">ITEM</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Item</a></li>
                    <li><a href="#">Grey</a></li>
                </ul>
        </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_to_here_heading" rel="moving_to_here_heading">MOVING TO HERE</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>

1 Ответ

2 голосов
/ 23 марта 2011

Если я правильно понимаю ваш вопрос ... добавление этого к событию #accordion li работает для меня: 

if ($(this).children('a:first:not(".active")')) {
   $('a.history_heading').removeClass('active');
}

После загрузки страницы тег привязки с классом history_heading также имееткласс active.После нажатия на другой заголовок меню (например, geography_heading) класс active будет удален из history_heading.

См. Действующий и рабочий пример на http://jsfiddle.net/Laxman13/4bYkP/1/

...