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>
  • 相关阅读:
    chrome浏览器(block)屏蔽http文件下载,如何解除?
    node项目无法编译
    Google的60款开源项目
    王兴:真正的高手,都在苦练基本功
    Flink SQL 写 hudi
    Python3 bytes函数
    Python中Base64编码与解码
    Python 类的__setitem__(),__getitem()__,__delitem__()方法
    Python queue(队列)
    Ubuntu20.04设置远程桌面连接
  • 原文地址:https://www.cnblogs.com/fangfeiyue/p/7453005.html
Copyright © 2011-2022 走看看