我有一个导航菜单。有一个下拉菜单的切换。切换的默认状态为蓝色,当下拉菜单关闭时,它变为红色。
但是当我点击其中一个 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();
})
});
最佳答案
您只需要手动触发您的事件处理程序(或附加正确的类)到您的 #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();
})
});
关于javascript - 单击 div 时如何将元素恢复为默认状态? (jQuery),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30691764/