當我點擊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(); 
    }) 


}); 

Answer 2

添加

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

到

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

Answer 3

你可以添加到您的代碼，它會很好地工作：

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