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

发布于 2024-11-09 21:06:40 字数 5057 浏览 3 评论 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 评论

23 人气

关注发私信

胡图图

文章 0 评论 0

关注

zt006

文章 0 评论 0

关注

z祗昰~

文章 0 评论 0

关注

冰葑

文章 0 评论 0

关注

野の

文章 0 评论 0

关注

天空

文章 0 评论 0

友情链接

文江博客

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

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

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

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

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

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

胡图图

zt006

z祗昰~

冰葑

野の

天空

友情链接

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