Попытка сделать JQuery Accordian, который реагирует на текущую дату - PullRequest
Новая
       5

Попытка сделать JQuery Accordian, который реагирует на текущую дату

0 голосов
/ 26 мая 2011

Я пытаюсь создать аккордеон в стиле календаря в jQuery.Итак, набор аккордеонных дро с каждым месяцем в виде дро.

Конечная цель - показать текущий месяц как открытый дро, когда страница загружена.

На данный момент я просто пытаюсьчтобы определить дату и добавить класс в текущий месяц.

Я прикрепил код ниже, заранее спасибо: 

<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>
                <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>

1 Ответ

1 голос
/ 26 мая 2011

Переменная даты, которая у вас есть, фактически возвращает объект, преобразует его в строку, затем в массив и затем применяет ваш класс 

var date= Date().toString().split(" ",2);
date=date[1];
jQuery('#nav li a[name^='+date+']').addClass("blue");
...