zoukankan      html  css  js  c++  java
  • 三级下拉菜单

    <!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>
  • 相关阅读:
    今天实现了 沿路径移动
    enum类型的本质(转)
    (转)成为优秀技术人员的两点建议
    深入理解 C# 协变和逆变
    web通信
    ajax入门(复习)
    git版本管理工具的使用
    在asp.net 中使用httpmodules对网页进行处理
    asp.net http概念原理复习
    web page复习笔记
  • 原文地址:https://www.cnblogs.com/fangfeiyue/p/7453005.html
Copyright © 2011-2022 走看看