单击div时如何将元素恢复为默认状态？ （jQuery的）

Question

我有一个导航菜单。菜单下拉有一个Toggle。切换的默认状态为蓝色，当下拉菜单输出时，它变为红色。

但是当我点击其中一个项目时，它并没有恢复到它的默认状态，即蓝色，它只是保持红色。

我的问题是：当我点击li项目时，如何让它恢复到默认状态？我想让它做旋转的事情，并在恢复到默认状态时将颜色改回蓝色。

这是一个JSFiddle链接https://jsfiddle.net/61g4std1/9/

感谢您抽出时间的人们：）

g++ -std=c++11 foo.cpp -o foo

Answer 1

您只需手动触发事件处理程序（或将正确的类附加到#menutoggle元素，以便将其更改为蓝色。 Here是一个更新的jsfiddle：

/*===================
---- Menu Rotate ----
===================*/
var rotation = 0;
$(document).ready(function() {

$('#menutoggle').click(function() {
    rotation += -180;
    $(this).css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
                 '-moz-transform' : 'rotate('+ rotation +'deg)',
                 '-ms-transform' : 'rotate('+ rotation +'deg)',
                 'transform' : 'rotate('+ rotation +'deg)'});
    $(this).toggleClass('rotated');
    $(this).toggleClass("hov");
});

})

/*=====================
---- Menu Dropdown ----
=====================*/
$(function() {
    $("#menutoggle").click(function () {
        $(this).toggleClass("#mobilemenu");
    });


    $('#menutoggle').click(function(){
        $('#mobilemenu').toggle('blind');
    });


    $("#mobilemenu li").click(function() {
        $("#mobilemenu li").removeClass('hover');
        $(this).addClass('hover');
        rotation += -180;
        $('#menutoggle').css({'-webkit-transform' : 'rotate('+ rotation +'deg)',
                 '-moz-transform' : 'rotate('+ rotation +'deg)',
                 '-ms-transform' : 'rotate('+ rotation +'deg)',
                 'transform' : 'rotate('+ rotation +'deg)'});
        $('#menutoggle').toggleClass('rotated');
        $('#menutoggle').toggleClass("hov");
    });

    $('a#hide, a#hide2').click(function(){
        $('#mobilemenu').hide();
    })


});

Answer 2

添加

$('#menutoggle').trigger('click');

到

$("#mobilemenu li").click(function() { ...

Answer 3

你可以将它添加到你的代码中，它可以正常工作：

$("li").click(function () {
   $("#menutoggle").css( "background-color", "blue" );
});