Добавить активный класс в SlideToggle nag

Я пытаюсь отредактировать этот фрагмент кода, чтобы добавить «активный» класс к элементу, который я щелкнул, и автоматически удалить его, когда я нажимаю на другой элемент моей навигации...

    var firstTime = true;
    $("#nav a").click(function() {
    var divname = this.name;
    $(this).addClass( "active", "fast", "easeOutBounce" );
    if (!firstTime) {
        if ($(".slid").hasClass(divname)) {
            firstTime = true;
            $(".slid").removeClass("slid").slideUp();
        } else {

            $(".slid").removeClass('slid').slideUp(500, function() {
                $("." + divname).slideToggle().addClass("slid");

            });
        }
    } else {
        $("." + divname).slideDown().addClass("slid");
        firstTime = false;
    }

});

Где я должен добавить .removeClass("active"), чтобы это сработало...?

Спасибо


javascript jquery submenu nav
person Steve Forest    schedule 05.03.2013    source источник

Ответы (3)


arrow_upward
0
arrow_downward

Просто сделай это

var firstTime = true;
$("#nav a").click(function() {
var divname = this.name;
//Remove existing 'active' class
$('.active').removeClass('active');
$(this).addClass( "active", "fast", "easeOutBounce" );
[...]
person JoDev    schedule 05.03.2013

arrow_upward
0
arrow_downward

Я думаю, что лучший способ сделать это - проверить, активен ли он, и только в этом случае изменить активный элемент.

Таким образом, ваше решение будет более производительным.

if (this.className.indexOf('active') == -1) {
    //remove class from actual selected
    var selected = $('#nav a.active');
    selected.removeClass( "active").text('');
    // add class here
    $(this).addClass( "active", "fast", "easeOutBounce" );
    $(this).text('active');
} else {
    $(this).removeClass( "active").text('');
}

Попробуйте здесь работающий пример

person Guern    schedule 05.03.2013
comment
@Steve Forest Я улучшил свое решение, чтобы оно лучше всего соответствовало вашей проблеме. Попробуйте мой код на этом jsFiddle - person Guern; 05.03.2013
comment
Я попробовал ваше решение (хотя удалил .text, я не хочу менять текст ссылки), но если я нажму на тот же пункт меню, который я щелкнул первым, чтобы скрыть вспомогательную навигацию, у a все еще есть активный класс. . Вы можете посмотреть ссылку, которую я предоставил до intelia.steveforest.com. - person Steve Forest; 05.03.2013
comment
Итак, вы хотите переключать класс active при нажатии на выбранные элементы? Я не понял. Найдите здесь обновленный код. - person Guern; 05.03.2013

arrow_upward

arrow_downward

person    schedule
comment
Работает отлично! Спасибо, единственное, что если я снова нажму на тот же элемент навигации, вложенная навигация поползет вверх, но .active останется... intelia.steveforest.com - person Steve Forest; 05.03.2013
comment
Код, который вы сейчас используете на своем сайте, немного отличается тем, как он извлекает выбранный элемент для удаления класса. - person kingdomcreation; 05.03.2013
comment
$('#nav a.active').removeClass('active'); удалит все активные классы перед добавлением нового ко всем элементам в #nav - person kingdomcreation; 05.03.2013
comment
Все то же самое... Работает, если я переключаюсь с одного элемента на другой, но если я нажимаю на тот же элемент навигации... активный класс остается - person Steve Forest; 05.03.2013
comment
Я думаю, я понимаю, когда вы снова нажимаете, чтобы скрыть подсписок, вы также хотите удалить активный класс... верно? - person kingdomcreation; 05.03.2013
comment
Да, если я нажму «Почему Intelia» и снова нажму «Почему Intelia», чтобы скрыть это, я хочу удалить активный класс на нем. - person Steve Forest; 05.03.2013
comment
Просто проверьте равенство, например if($(this) != $('.active')) перед добавлением класса - person JoDev; 05.03.2013
comment
Вам нужно удалить класс после того, как вы скользите вверх... проверка обновления может быть неправильной, и $('#nav a.active').removeClass('active'); может потребоваться войти под другим слайдом вверх... - person kingdomcreation; 05.03.2013