Question

我遇到问题toggleClass它似乎无法正常工作。图片应在show和hide之间更改。它确实变为hide，但没有后退

这是我的example和一些代码：

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

任何想法？

感谢

Answer 1

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

<强> DEMO

完整代码

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

Answer 2

有一个切换功能可以为您提供开箱即用的功能：

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

toggle docs：

描述：显示或隐藏匹配的元素。

如何在jquery中的两个类之间切换？

2 个答案: