三级下拉菜单

<!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>
时间: 2024-08-01 18:57:34

三级下拉菜单的相关文章

CSS样式三级下拉菜单

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="

三级下拉菜单 (通用版)

<html><head><title>阿里西西网页特效演示, 三级下拉菜单 (通用版)</title><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> </head><body> <SCRIPT LANGUAGE="JavaScript"><!--functi

CSS打造三级下拉菜单

<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><meta name="keywords" content="站长,网页特效,js特效,广告代码,zzjs,zzjs.net,sky,www.zzjs.net,站长特效 网" /><meta name="d

CSS3实现的一款三级下拉菜单

<html> <head> <title>河北礼品公司</title> <style> body { background:#eee; margin:0; padding:0; } .example { background:#fff url(/imagesforcode/201306/clouds-in-blue-sky.jpg); width:770px; height:570px; border:1px #000 solid; margin

使用POI生成具有三级下拉菜单的Excel文档

曾在工作中遇到这种需求,研究很久编码出一个方法,提供于此供大家参考. 效果图如下: 开始贴代码,代码中部分测试数据不影响功能. 第一部分(核心处理): 此部分包含几个方面: 获取三级下拉框各列的数据: 创建每个下拉功能的名称管理器 在隐藏的sheet中生成下拉菜单所需要的row 代码如下: /** * 第一部分 * 将三个列表所有字段从数据库查询出,并生成名称管理器,存放至隐藏的sheet中 */ private static HSSFWorkbook writePorpData() { int

Django分析之三级下拉菜单选择省/市/县

今天遇到了一个一直想做却没有机会去做的功能,今天完成了便记录下来. 那这次是具体是个什么功能呢?其实还是很简单的效果,就是在用户注册的时候可以选择省/市/县,很简单的一个小功能. 那现在就开始了~首先我们要在数据库中先建一个表,用来保存全国的省/市/县信息,下面是表的结构: CREATE TABLE IF NOT EXISTS "china_regionalTable" ( "id" integer NOT NULL, "name" varcha

日期三级下拉菜单

Html 1 <select id="selYear"></select> 2 <select id="selMonth"></select> 3 <select id="selDay"></select> 4 <script src="DateSelector.js"></script> 5 <script type=&qu

MVC省市区三级下拉菜单联动

控制器端代码(都在同一个表中): using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcApplication10.Models; namespace 下拉列表联动显示_中国省市_.Controllers { public class HomeController : Controller { [HttpGet] //刚

MVC三级下拉菜单

控制器端代码: using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using MvcApplication8.Models; namespace MvcApplication8.Controllers { public class CarsController : Controller { // // GET: /Cars/ publ