Jquery: на SlideToggle изменить текст родительского элемента?

Question

Я делаю slideToggle следующим образом:

$(document).ready(function(){       
        $("#show_morecats").click(function(){
        $("#morecats").slideToggle("slow");
        $("#show_morecats").css("background-color","#399C05");
    });
});

HTML

<a href="#" id="show_morecats">More</a>
<div id="morecats" style="display:none;">Some text</div>

Теперь я хочу, чтобы при нажатии на ссылку More тогда morecats div открывался с эффектом слайда, а цвет more ссылки будет красным, а при повторном нажатии на ссылку more она будет закрыта и цвет ссылки будет синим.

SlideToggle работает вполне нормально, но раскраска ссылки работает некорректно. Я не хочу ставить условие: visible, потому что я знаю, что в jquery есть функция, которая делает то же самое, переключает ваш div и в то же время переключает класс или CSS основного элемента, но что это за точная функция и как ее использовать , Я гуглил об этом, но ничего не получил.

Может кто-нибудь предложить мне кратчайший способ решения этой непростой проблемы.

Answer 1

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

JQuery

$(document).ready(function(){
    $('#show_morecats').bind('click', function(){
        $('#morecats').slideToggle('slow', function() { 
            $('#show_morecats').toggleClass("opened");
        });
    });
});

HTML

<a href="#" id="show_morecats">More</a> 
<div id="morecats" style="display:none;">Some text</div>

CSS

#show_morecats { color: blue; }
#show_morecats.opened { color: red; }

Answer 2

Я думаю, что вы имеете в виду, хотите ли вы изменить цвет фона после завершения анимации? Вот для чего используется аргумент обратного вызова в slideToggle.

Изменить вторую строку на:

$('#morecats').slideToggle('slow',
    function() { $('#show_morecats').css({ backgroundColor: '#399C05' });
});

Вы также можете использовать метод toggleClass(), хотя то, как вы сформулировали свой вопрос, немного запутанно, если честно.