我有一个折叠菜单。因为我使用cookie来存储它的值,首先我使用了Class,但是它没有正常工作,所以我将它用于id。
当我得到Id时,它会显示它的下一个div可见。
这是我的Fiddle
$(document).ready(function() {
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;
}
var widget2 = $(".widget2");
var box2 = $(".box2");
if (getCookie('box2cooki')) {
// alert(getCookie('box2cooki'));
var id = getCookie('box2cooki');
id = $(".box2").attr('id');
alert(id);
//alert(Element);
//alert(box2ID);
//$(".box2").next(".widget2").slideDown(200);
}
else {
alert("hiiiiiii");
}
widget2.hide();
box2.click(function() {
$(this).next(widget2).slideToggle(200);
var box2ID = $(this).attr('id');
setCookie('box2cooki', box2ID);
//alert(box2ID);
});
$(".inner").hide();
$(".box").click(function() {
$(this).next(".inner").slideToggle(200);
});
//alert(box2ID);
});
<div class="box2" id="1"><h3>Basketball</h3></div>
<div class="widget2" style="display: block; ">
<div class="widget"><div class="box"><h3>Australia</h3></div>
<div class="inner" style="display: block; ">
<ul class="leagues">
<li class="even"><a href="#" class="league-145">Australian NBL</a></li>
</ul><div class="clear-both"></div>
</div>
</div>
</div><div class="box2" id="2"><h3>Tennis</h3></div>
<div class="widget2" style="display: block; "><div class="widget"><div class="box"> <h3>Australia</h3></div>
<div class="inner" style="display: block; ">
<ul class="leagues">
<li class="even"><a href="#" class="league-145">Australian Open</a></li>
</ul>
<div class="clear-both"></div>
</div></div>
</div>