Trying to make a jQuery Accordian that reacts to current date
I'm trying to build a calendar style accordian in jQuery. So a set of accordian draws with each month as a draw.
The final goal is to display the current month as an open draw when the page is loaded.
At this point im just trying to detect the date and add a class to the current month.
I've attached my code below, thanks in advance:
<style type="text/css">
body{ }
ul#nav{ width:600px; border:1px solid #ddd; }
ul{ clear:both; margin:0; padding:0; list-style:none }
ul ul{ margin-left:10px; }
li{ clear:both; }
h2{ background:#666 no-repeat 0 50%; padding-left:15px; }
h2.open{ background:#ccc no-repeat 0 50%; }
a{ display:block; padding:10px; padding-left:25px; text-decoration:none; font-weight:bold; }
a.items{ background:#f9f9f9; }
a.items:hover{ background:#eee; }
a.home{ background:none; font-size:1.5em; color:black; margin-left:-10px; cursor:text; }
span{ font-weight:normal; color:black }
.blue{ color: #3CF; }
</style>
</head>
<body>
<ul id="nav">
<li><a href="#" name="January">Jan</a></li>
<li><a href="#" name="February">Feb</a>
<ul>
开发者_JAVA技巧 <li><a href="#">Event 1</a></li>
<li><a href="#">Event 2</a></li>
</ul>
</li>
<li><a href="#" name="March">Mar</a></li>
<li><a href="#" name="April">Apr</a>
<ul>
<li><a href="#">Event 1</a></li>
<li><a href="#">Event 2</a></li>
</ul>
</li>
<li><a href="#" name="May">May</a></li>
<li><a href="#" name="June">Jun</a>
<ul>
<li><a href="#">Event 1</a></li>
</ul>
</li>
<li><a href="#" name="July">Jul</a>
<ul>
<li><a href="#">Event 1</a></li>
<li><a href="#">Event 2</a></li>
<li><a href="#">Event 3</a></li>
<li><a href="#">Event 4</a></li>
<li><a href="#">Event 5</a></li>
</ul>
</li>
<li><a href="#">Aug</a>
<ul>
<li><a href="#">Event 1</a></li>
<li><a href="#">Event 2</a></li>
<li><a href="#">Event 3</a></li>
<li><a href="#">Event 4</a></li>
<li><a href="#">Event 5</a></li>
<li><a href="#">Event 6</a></li>
</ul>
</li>
<li><a href="#">Sep</a>
<ul>
<li><a href="#">Event 1</a></li>
</ul>
</li>
<li><a href="#">Oct</a>
<ul>
<li><a href="#">Event 1</a></li>
<li><a href="#">Event 2</a></li>
<li><a href="#">Event 3</a></li>
<li><a href="#">Event 4</a></li>
<li><a href="#">Event 5</a></li>
<li><a href="#">Event 6</a></li>
</ul>
</li>
<li><a href="#">Nov</a></li>
<li><a href="#">Dec</a>
<ul>
<li><a href="#">Event 1</a></li>
<li><a href="#">Event 2</a></li>
<li><a href="#">Event 3</a></li>
</ul>
</li>
</ul>
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$('#nav ul').hide();
// detect the date and wrap in variable
var date= new Date();
// add class to date li
$('#nav li a[name~=date]').addClass("blue");
jQuery('#nav a').bind('click', function(e){
$(this).parents('li:first').find('ul:first').slideToggle();
return false;
});
$('#nav li').each(function(i) {
subitems =$(this).find('ul:first>li').length;
if(subitems > 0){
$(">a", this).addClass('items');
$(">a", this).append(' <span>(' + subitems + ')<span>');
}else{
$(">a", this).addClass("noitems");
}
});
});
</script>
</body>
The date variable you have is actually returning an object, convert it to a string, then to an array, and then apply your class
var date= Date().toString().split(" ",2);
date=date[1];
jQuery('#nav li a[name^='+date+']').addClass("blue");
加载中,请稍侯......
精彩评论