我有一个菜单,在该菜单中,当我们单击它的主 div 时,它的颜色会发生变化,当我们再次单击时,它仍然保持相同的颜色。
现在我需要什么,在这个切换菜单中,当我们单击它时,它会改变颜色,但是当我们再次单击时,它看起来就像其他父 div。
这是我的小提琴。请检查一下。
这是我的脚本。
$(document).ready(function() {
$(".widget2").hide();
$(".inner").hide();
function getCookie(c_name) {
var i, x, y, ARRcookies = document.cookie.split(";");
for (i = 0; i < ARRcookies.length; i++) {
x = ARRcookies[i].substr(0, ARRcookies[i].indexOf("="));
y = ARRcookies[i].substr(ARRcookies[i].indexOf("=") + 1);
x = x.replace(/^\s+|\s+$/g, "");
if (x == c_name) {
return unescape(y);
}
}
}
function setCookie(c_name, value, exdays) {
var exdate = new Date();
exdate.setDate(exdate.getDate() + exdays);
var c_value = escape(value) + ((exdays === null) ? "" : "; expires=" + exdate.toUTCString());
document.cookie = c_name + "=" + c_value;
}
$(".box2").hover(
function() {
$(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
var widget2 = $(".widget2");
var box2 = $(".box2");
if (getCookie('box2id') || getCookie('box1text')) {
var text = getCookie('box1text');
var id = getCookie('box2id');
$('#' + id).addClass("active");
$('#' + id).next().slideDown(600, function() {
$('.box:contains(' + text + ')').next('.inner').slideDown(500);
});
} else {
$(".widget2").hide();
$(".inner").hide();
}
box2.click(
function() {
$(this).next(widget2).slideToggle(200);
$(".widget2").not($(this).next(widget2)).stop(true, false).slideUp(); //Hide others divs
var box2ID = $(this).attr('id');
$(".box2").removeClass("active");
$(this).removeClass("hover").addClass("active");
setCookie('box2id', box2ID);
});
$(".box").click(function() {
$(this).next(".inner").slideToggle(200);
var box1TX = $(this).text();
setCookie('box1text', box1TX);
});
});