码迷,mamicode.com
首页 > 编程语言 > 详细

JavaScript无限极菜单

时间:2014-10-27 21:11:26      阅读:281      评论:0      收藏:0      [点我收藏+]

标签:style   blog   http   io   color   ar   java   for   sp   

<!DOCTYPE html>
<html>
<head>
    <title> New Document </title>
    <meta charset="utf-8" />
    <style>
        h2 {margin: 0; padding: 0;}
        #ul1 ul {display: none;}
        #ul1 .next {color: red;}
    </style>
    <script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script>
    <script>

        $(function(){

            $(#ul1 li).find(h2).click(function(){
                
                var oUl = $(this).parent().find(ul)[0];
                var aUl = $(this).parent().siblings(li).find(ul);

                $(aUl).slideUp();
                $(aUl).not(oUl).attr(bClk,false);

                if($(oUl).attr(bClk)==true){
                    $(oUl).slideUp().attr(bClk,false);
                    $(oUl).find(ul).slideUp().attr(bClk,false);
                }else{
                    $(oUl).slideDown().attr(bClk,true);
                }

            })

        });

    </script>
</head>

<body>
    <ul id="ul1">
        <li><h2>1111</h2></li>
        <li><h2 class="next">2222</h2>
            <ul>
                <li><h2 class="next">aaaa</h2>
                    <ul>
                        <li><h2>aaaa</h2></li>
                        <li><h2>bbbb</h2></li>
                        <li><h2>cccc</h2></li>
                        <li><h2>dddd</h2></li>
                    </ul>
                </li>
                <li><h2 class="next">aaaa</h2>
                    <ul>
                        <li><h2>aaaa</h2></li>
                        <li><h2 class="next">bbbb</h2>
                            <ul>
                                <li><h2>aaaa</h2></li>
                                <li><h2>bbbb</h2></li>
                                <li><h2>cccc</h2></li>
                                <li><h2>dddd</h2></li>
                            </ul>
                        </li>
                        <li><h2 class="next">cccc</h2>
                            <ul>
                                <li><h2>aaaa</h2></li>
                                <li><h2>bbbb</h2></li>
                                <li><h2>cccc</h2></li>
                                <li><h2>dddd</h2></li>
                            </ul>
                        </li>
                        <li><h2>dddd</h2></li>
                    </ul>
                </li>
                <li><h2>cccc</h2></li>
                <li><h2>dddd</h2></li>
            </ul>
        </li>
        <li><h2 class="next">3333</h2>
            <ul>
                <li><h2 class="next">aaaa</h2>
                    <ul>
                        <li><h2>aaaa</h2></li>
                        <li><h2>bbbb</h2></li>
                        <li><h2>cccc</h2></li>
                        <li><h2>dddd</h2></li>
                    </ul>
                </li>
                <li><h2 class="next">aaaa</h2>
                    <ul>
                        <li><h2>aaaa</h2></li>
                        <li><h2>bbbb</h2></li>
                        <li><h2>cccc</h2></li>
                        <li><h2>dddd</h2></li>
                    </ul>
                </li>
                <li><h2>cccc</h2></li>
                <li><h2>dddd</h2></li>
            </ul>
        </li>
        <li><h2>4444</h2>
        </li>
    </ul>
</body>
</html>


来源:http://bbs.miaov.com/forum.php?mod=viewthread&tid=6112&page=1#pid16332

JavaScript无限极菜单

标签:style   blog   http   io   color   ar   java   for   sp   

原文地址:http://www.cnblogs.com/liuswi/p/4055074.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!