how to toggle in between 2 classes in jquery?

问题

i have an issue doing toggleClass it doesn't seem to work properly. the image should change in between show and hide. It does change in to hide, but no back

here is my example and some code:

<div class="top_menu_hidden" style="display: none; ">testing</div>
<div class="show_menu"></div>

$('.show_menu').on('click', function(){
        $('.top_menu_hidden').stop().slideToggle('normal', function(){
            $(".show_menu").toggleClass("hide_menu show_menu");
        });
});​

.show_menu{
    background: url("http://placehold.it/150&text=show") no-repeat scroll 0 0 transparent;
    height: 150px;
    width: 150px;
}
.hide_menu{
    background: url("http://placehold.it/150&text=hide") no-repeat scroll 0 0 transparent;
    height: 150px;
    width: 150px;
}

any ideas?

thanks

回答1:

$(".show_menu, .hide_menu").toggleClass("hide_menu show_menu");

DEMO

Full code

$('.show_menu').on('click', function() {
    $('.top_menu_hidden').stop().slideToggle('normal', function() {
        $(".show_menu, .hide_menu").toggleClass("hide_menu show_menu");
    });
});

回答2:

There is a toggle function that does it for you out of the box:

$(".show_menu").toggle();

toggle docs:

Description: Display or hide the matched elements.

来源：https://stackoverflow.com/questions/11124060/how-to-toggle-in-between-2-classes-in-jquery