尝试制作一个对当前日期做出反应的 jQuery Accordian

发布于 2024-11-09 21:06:40 字数 5057 浏览 0 评论 0原文

我正在尝试用 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>

原文

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

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

三生殊途 2024-11-16 21:06:40

您拥有的日期变量实际上是返回一个对象，将其转换为字符串，然后转换为数组，然后应用您的类

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

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");

回复收藏 0 原文

~没有更多了~

关于作者

玩世

暂无简介

0 文章

0 评论

22 人气

关注发私信

烙印

文章 0 评论 0

关注

singlesman

文章 0 评论 0

关注

给自己一个微笑

文章 0 评论 0

关注

独孤求败

文章 0 评论 0

关注

晨钟暮鼓

文章 0 评论 0

关注

我是自愿种绣球花的

文章 0 评论 0

友情链接

文江博客

尝试制作一个对当前日期做出反应的 jQuery Accordian

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

尝试制作一个对当前日期做出反应的 jQuery Accordian

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

烙印

singlesman

给自己一个微笑

独孤求败

晨钟暮鼓

我是自愿种绣球花的

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。