javascript - 单击 div 时如何将元素恢复为默认状态？ (jQuery)

Question

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

但是当我点击其中一个 li 元素时，它不会恢复到默认状态(蓝色)，它只是保持红色。

我的问题是:当我点击 li 项时，如何让它回到默认状态？我希望它执行旋转操作，并在恢复到默认状态时将颜色更改回蓝色。

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

谢谢大家抽出时间:)

/*===================
---- Menu Rotate ----
===================*/
$(document).ready(function() {

var rotation = 0;
$('#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)'});
});

$('#menutoggle').click(function() {
$(this).toggleClass('rotated');
});

$('#menutoggle').click(function () {
   $(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');
    });

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


});

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


});