• 三级下拉菜单


    <!DOCTYPE html>
    <html>
    
        <head>
            <meta charset="utf-8" />
            <title></title>
        </head>
        <style type="text/css">
            
            ul li.yiji {
                list-style-image: url(img/-.gif);
            }
            ul li{
                cursor: pointer;
            }
        </style>
    
        <body>
            <ul>
                <li class="yiji">主题市场
                    <ul>
                        <li>运动派
                            <ul>
                                <li>三级菜单a</li>
                                <li>三级菜单b</li>
                                <li>三级菜单c</li>
                                <li>三级菜单d</li>
                            </ul>
                        </li>
                        <li>有车族
                            <ul>
                                <li>三级
                                    <ul>
                                        <li>四级</li>
                                        <li>四级</li>
                                        <li>四级</li>
                                    </ul>
                                </li>
                                <li>三级</li>
                                <li>三级</li>
                                <li>三级</li>
                            </ul>
                        </li>
                        <li>生活家</li>
                    </ul>
                </li>
                <li class="yiji">特色购物
                    <ul>
                        <li>淘宝二手</li>
                        <li>拍卖会</li>
                        <li>爱逛街</li>
                        <li>全球购</li>
                        <li>淘女郎</li>
                    </ul>
                </li>
                <li class="yiji">优惠促销
                    <ul>
                        <li>天天特价</li>
                        <li>免费试用</li>
                        <li>清仓</li>
                        <li>1元起拍</li>
                    </ul>
                </li>
                <li>工具</li>
            </ul>
            <div name="dd"><p>dd</p></div>
            <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>  
            <script type="text/javascript">
                //has()匹配含有选择器所匹配的元素的元素
                //is()根据选择器、元素或 jQuery 对象来检测匹配元素集合
                $(function(){
                    $("li:has(ul)").click(function(e){
                        if(this == e.target){
                            if($(this).children().is(":hidden")){
                                $(this).css("list-style-image","url(img/-.gif)");
                            }else{
                                $(this).css("list-style-image","url(img/1.gif)");
                            }
                            $(this).children().toggle("slow");
                        }
                        
                    })
                    $("li:not(:has(ul))").css("list-style","none");
                })
                
            </script>
    
        </body>
    
    </html>
  • 相关阅读:
    VPC下访问FTP的问题
    不错的CHM反编译工具chmdecoder
    使用inet进行FTP传输(转)
    SetupFactory安装制作心得
    VB实现半透明或者部分透明窗体
    小说《窃明》
    Basic Conception On SOA
    Ubuntu下JDK7安装全过程并调试第一个带包的java程序
    Ubuntu下vim如何保存退出
    使用NHibernate3.0来构建自己的ORM框架(一)
  • 原文地址:https://www.cnblogs.com/fangfeiyue/p/7453005.html
Copyright © 2020-2023  润新知