急,html怎么实现多级菜单

重点:点击父菜单是并不是显示隐藏的子菜单,而是直接跳转到父菜单页面,
只有点击父菜单旁边的三角形符号时才会显示/隐藏子菜单,如果一个菜单没有子菜单,则不显示三角形符号。效果大概类似于下面这张图。
网上的例子都是点击父菜单就直接显示子菜单,但我们的需求并不是这样。
图片说明
图片说明
很急,如果网上有这样的案例,请给出网址,如果可行马上给分。

2个回答

很简单。只要把点击事件改到三角上即可

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title> 页面名称 </title>
<style type="text/css">
#menu li {
    list-style-type: none;
    margin-left: 20px;
}
#menu ul {
    margin: 0;
    padding: 0;
}
#menu .mg {
    width: 20px;
    height: 20px;
    font-style: 20px;
    line-height: 20px;
    text-align: center;
    display: inline-block;
    margin-left: -20px;
}
#menu .on {
    transform: rotate(90deg);
}
#menu>ul ul {
    display: none;
}
</style>
</head>
<body>
<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<div id="menu">
    <ul>
        <li><a href="p1.html">菜单 1</a></li>
        <li><span class="mg">></span><a href="p2.html">菜单 2</a>
            <ul>
                <li><span class="mg">></span><a href="p2-1.html">菜单 2-1</a>
                    <ul>
                        <li><a href="p2-1-1.html">菜单 2-1-1</a></li>
                        <li><a href="p2-1-2.html">菜单 2-1-2</a></li>
                    </ul>
                </li>
                <li><a href="p2-2.html">菜单 2-2</a></li>
                <li><a href="p2-3.html">菜单 2-3</a></li>
            </ul>
        </li>
        <li><span class="mg">></span><a href="p3.html">菜单 3</a>
            <ul>
                <li><a href="p3-1.html">菜单 3-1</a></li>
                <li><a href="p3-2.html">菜单 3-2</a></li>
                <li><a href="p3-3.html">菜单 3-3</a></li>
            </ul>
        </li>
        <li><a href="p4.html">菜单 4</a></li>
    </ul>
</div>
<script type="text/javascript">
$(function(){
    $("#menu").on("click", ".mg", function(event){
        $(this).toggleClass("on").next().next().toggle();
    });
});
</script>
</body>
</html>```

weixin_38860401
可以简单点 谢谢
大约一年之前 回复
weixin_38860401
可以简单点 谢谢
大约一年之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
求一个多级菜单的案例
-
JeeCMS如何制作多级菜单下拉列表??
-
怎么新建多级下拉菜单
-
Android 如何在多级菜单进行传值并且插入到数据库?
-
javaweb项目的菜单如何从数据库获取实现多级联动
-
怎样用ul 模拟select,并且支持多级菜单,可以获取选中的菜单的值?
-
如何给IE的鼠标右键增加多级菜单项目?
-
extjs desktop 多级菜单的快捷方式问题
-
多级菜单选项点击选项显示内容且在顶部添加生成该选项名
-
多级域名是如何实现的呢?
-
JS动态加载显示多级菜单
-
VUE 多级菜单,路由变了页面内容没变
-
sqlserver 查询多级菜单并排序。求大家指导。
-
类似于android onenote 主界面的多级侧滑怎么实现?
-
C++ 如何创建多级目录
-
ASP.net,实现多级评论功能
-
Activiti工作流多级分派/分配/会签怎么实现
-
Java8多级分组问题指教
-
急 急 LDAP主从同步多级?
-
史上最详细的IDEA优雅整合Maven+SSM框架(详细思路+附带源码)
网上很多整合SSM博客文章并不能让初探ssm的同学思路完全的清晰,可以试着关掉整合教程,摇两下头骨,哈一大口气,就在万事具备的时候,开整,这个时候你可能思路全无 ~中招了咩~ ,还有一些同学依旧在使用eclipse或者Myeclipse开发,我想对这些朋友说IDEA 的编译速度很快,人生苦短,来不及解释了,直接上手idea吧。这篇文章每一步搭建过程都测试过了,应该不会有什么差错。本文章还有个比较优秀的特点,就是idea的使用,基本上关于idea的操作都算是比较详细的,所以不用太担心不会撸idea!最后,本文
爬虫小程序 - 爬取王者荣耀全皮肤
王者荣耀全皮肤图片爬取
动态规划入门到熟悉,看不懂来打我啊
2.1斐波那契系列问题 2.2矩阵系列问题 2.3跳跃系列问题 3.1 01背包 3.2 完全背包 3.3多重背包 3.4 一些变形选讲 2.1斐波那契系列问题 在数学上,斐波纳契数列以如下被以递归的方法定义:F(0)=0,F(1)=1, F(n)=F(n-1)+F(n-2)(n&gt;=2,n∈N*)根据定义,前十项为1, 1, 2, 3, 5, 8, 13, ...
从入门到精通,Java学习路线导航
引言 最近也有很多人来向我"请教",他们大都是一些刚入门的新手,还不了解这个行业,也不知道从何学起,开始的时候非常迷茫,实在是每天回复很多人也很麻烦,所以在这里统一作个回复吧。 Java学习路线 当然,这里我只是说Java学习路线,因为自己就是学Java的,对Java理当很熟悉,对于其它方面,我也不是很了解。 基础阶段 首先是基础阶段,在基础阶段,我们必须掌握Java基础,Mysql数据库,Ora...
如何优雅的爬妹子网
from urllib import request import os from user_agents import ua_list import time import random import re import requests from lxml import etree class MeiziSpider(): def init(self): self.url = ‘https:/...
花了20分钟,给女朋友们写了一个web版群聊程序
参考博客 [1]https://www.byteslounge.com/tutorials/java-ee-html5-websocket-example
对计算机专业来说学历真的重要吗?
我本科学校是渣渣二本,研究生学校是985,现在毕业五年,校招笔试、面试,社招面试参加了两年了,就我个人的经历来说下这个问题。 这篇文章很长,但绝对是精华,相信我,读完以后,你会知道学历不好的解决方案,记得帮我点赞哦。 先说结论,无论赞不赞同,它本质就是这样:对于技术类工作而言,学历五年以内非常重要,但有办法弥补。五年以后,不重要。 目录: 张雪峰讲述的事实 我看到的事实 为什么会这样 ...
Java入门学习路线目录索引(持续更新中)
新增: Redis 入门 【Redis缓存】- 入门——Redis介绍和环境搭建【Redis缓存】- Redis数据结构、基本命令操作、持久化【Redis缓存】- Java客户端Jedis SpringBoot 入门 【SpringBoot 框架】- 入门——环境搭建、工程热部署、idea快捷创建SpringBoot项目【SpringBoot 框架】- SpringBoot 原理分析【S...
八大排序(C语言)
void BubbleSort();//冒泡 void SelectSort();//选择 void InsertSort();//直接插入 void ShellSort();//希尔 void HeapSort();//堆排 void QuickSort();//快排 void MegerSort();//归并 void RadixSort();//基数(桶排序) 冒泡: 1)...
程序员必须掌握的核心算法有哪些?
由于我之前一直强调数据结构以及算法学习的重要性,所以就有一些读者经常问我,数据结构与算法应该要学习到哪个程度呢?,说实话,这个问题我不知道要怎么回答你,主要取决于你想学习到哪些程度,不过针对这个问题,我稍微总结一下我学过的算法知识点,以及我觉得值得学习的算法。这些算法与数据结构的学习大多数是零散的,并没有一本把他们全部覆盖的书籍。下面是我觉得值得学习的一些算法以及数据结构,当然,我也会整理一些看过...
python 程序员进阶之路:从新手到高手的100个模块
在知乎和CSDN的圈子里,经常看到、听到一些 python 初学者说,学完基础语法后,不知道该学什么,学了也不知道怎么用,一脸的茫然。近日,CSDN的公众号推送了一篇博客,题目叫做《迷思:Python 学到什么程度可以面试工作?》,真实反映了 python 程序员在成长过程中的一些困惑。
Python——画一棵漂亮的樱花树(不同种樱花+玫瑰+圣诞树喔)
最近翻到一篇知乎,上面有不少用Python(大多是turtle库)绘制的树图,感觉很漂亮,我整理了一下,挑了一些我觉得不错的代码分享给大家(这些我都测试过,确实可以生成) one 樱花树 动态生成樱花 效果图(这个是动态的): 实现代码 import turtle as T import random import time # 画樱花的躯干(60,t) def Tree(branch, ...
这应该是把计算机网络五层模型讲的最好是文章了,看不懂你打我
帅地:用心写好每一篇文章! 前言 天各一方的两台计算机是如何通信的呢?在成千上万的计算机中,为什么一台计算机能够准确着寻找到另外一台计算机,并且把数据发送给它呢? 可能很多人都听说过网络通信的 5 层模型,但是可能并不是很清楚为什么需要五层模型,五层模型负责的任务也有可能经常混淆。下面是网络通信的五层模型 说实话,五层模型的具体内容还是极其复杂的,不过今天这篇文章,我将用最简洁的模式,通过网...
HTML CSS整理笔记
常见字体单位: 1.em 移动端常用的字体尺寸单位,说白em就相当于“倍”,比如设置当前的div的字体大小为1.5em,则当前的div的字体大小为:当前div继承的字体大小*1.5。 但当div进行嵌套时,em始终按当前div继承的字体大小来缩放。 2.rem r是root的意思,即相对于根节点html的font-size进行缩放,当有嵌套关系时,嵌套关系的元素的字体大小始终按照根节点的字体大小...
史上最全的mysql基础教程
启动与停止 启动mysql服务 sudo /usr/local/mysql/support-files/mysql.server start 停止mysql服务 sudo /usr/local/mysql/support-files/mysql.server stop 重启mysql服务 sudo /usr/local/mysql/support-files/mysql.server resta...
为什么你学不会递归?告别递归,谈谈我的经验
可能很多人在大一的时候,就已经接触了递归了,不过,我敢保证很多人初学者刚开始接触递归的时候,是一脸懵逼的,我当初也是,给我的感觉就是,递归太神奇了! 可能也有一大部分人知道递归,也能看的懂递归,但在实际做题过程中,却不知道怎么使用,有时候还容易被递归给搞晕。也有好几个人来问我有没有快速掌握递归的捷径啊。说实话,哪来那么多捷径啊,不过,我还是想写一篇文章,谈谈我的一些经验,或许,能够给你带来一些帮助...
有哪些让程序员受益终生的建议
从业五年多,辗转两个大厂,出过书,创过业,从技术小白成长为基层管理,联合几个业内大牛回答下这个问题,希望能帮到大家,记得帮我点赞哦。 敲黑板!!!读了这篇文章,你将知道如何才能进大厂,如何实现财务自由,如何在工作中游刃有余,这篇文章很长,但绝对是精品,记得帮我点赞哦!!!! 一腔肺腑之言,能看进去多少,就看你自己了!!! 目录: 在校生篇: 为什么要尽量进大厂? 如何选择语言及方...
大学四年自学走来,这些私藏的实用工具/学习网站我贡献出来了
大学四年,看课本是不可能一直看课本的了,对于学习,特别是自学,善于搜索网上的一些资源来辅助,还是非常有必要的,下面我就把这几年私藏的各种资源,网站贡献出来给你们。主要有:电子书搜索、实用工具、在线视频学习网站、非视频学习网站、软件下载、面试/求职必备网站。 注意:文中提到的所有资源,文末我都给你整理好了,你们只管拿去,如果觉得不错,转发、分享就是最大的支持了。 一、电子书搜索 对于大部分程序员...
linux系列之常用运维命令整理笔录
本博客记录工作中需要的linux运维命令,大学时候开始接触linux,会一些基本操作,可是都没有整理起来,加上是做开发,不做运维,有些命令忘记了,所以现在整理成博客,当然vi,文件操作等就不介绍了,慢慢积累一些其它拓展的命令,博客不定时更新 free -m 其中:m表示兆,也可以用g,注意都要小写 Men:表示物理内存统计 total:表示物理内存总数(total=used+free) use...
大学四年,我把私藏的自学「学习网站/实用工具」都贡献出来了
在分享之前,先说说初学者如何学习编程,这个话题想必非常的重要,要学好编程,给你一些学习网站也好、实用工具也好,但前提是你知道如何去学习它。 见过很多初学者,以及小鹿我刚开始学习的时候,也是自己瞎摸索,找不到路子,看什么书?看什么资料?编程的方向太多了,如果确定自己的方向?尤其是上大一、大二甚至大三还没有确定自己到底是学习前端还是后天,每天这学一点,那学一块,掌握那么多,没有一门精通的,去面试的时候...
中国麻将:世界上最早的区块链项目
中国麻将:世界上最早的区块链项目 最近区块链这个玩意又被市场搞的很是火热,相信大部分人都不太清楚这玩意到底是怎么样的一个概念,它来了,它来了,它到底是啥~ 国家都开始发文支持了,下面是一个通俗易懂的例子:中国麻将。 甲首先发起一个申请,我要打麻将,组建一个麻将局,这就相当于创建一个区块,这个区块会被广播...
比特币原理详解
一、什么是比特币 比特币是一种电子货币,是一种基于密码学的货币,在2008年11月1日由中本聪发表比特币白皮书,文中提出了一种去中心化的电子记账系统,我们平时的电子现金是银行来记账,因为银行的背后是国家信用。去中心化电子记账系统是参与者共同记账。比特币可以防止主权危机、信用风险。其好处不多做赘述,这一层面介绍的文章很多,本文主要从更深层的技术原理角度进行介绍。 二、问题引入 假设现有4个人...
Python 基础(一):入门必备知识
Python 入门必备知识,你都掌握了吗?
兼职程序员一般可以从什么平台接私活?
这个问题我进行了系统性的总结,以下将进行言简意赅的说明和渠道提供,希望对各位小猿/小媛们有帮助~ 根据我们的经验,程序员兼职主要分为三种:兼职职位众包、项目整包和自由职业者驻场。 所谓的兼职职位众包,指的是需求方这边有自有工程师配合,只需要某个职位的工程师开发某个模块的项目。比如开发一个 app,后端接口有人开发,但是缺少 iOS 前端开发工程师,那么他们就会发布一个职位招聘前端,来配合公司一...
Ngrok: 超简单的内网穿透,了解一下 ?
【1】什么是内网穿透? 首先,我们生活中的网络从应用上可以分为内网和外网; 内网就是你自己的网络环境,就你自己能访问,比如你本地测试进行的localhost; 外网就不言而喻了,你看网页,视频等这些网址都是外网。 那么什么又是内网穿透呢?简单的说就是通过访问一个外网地址,然后穿透到你的内网地址。 【2】内网穿透有什么用? 【情景1】 假设你写了一个代码功能,本地测试已经OK,此...
反射全解
反射的概念 反射的引入: Object obj = new Student(); 若程序运行时接收到外部传入的一个对象,该对象的编译类型是Object,但程序又需要调用该对象运行类型的方法: 1.若编译和运行类型都知道,使用 instanceof判断后,强转。 2.编译时根本无法预知该对象属于什么类,程序只能依靠运行时信息来发现对象的真实信息,这时就必须使用反射了。 3.要是想得到对象...
死磕C语言指针
兜兜转转还是逃不过 C 语言,这该死的缘分。 先看一眼我的西野七濑 学习自:https://zhuanlan.zhihu.com/p/89121683 目录 1 指针 1.1 指针是乜嘢 1.2 指针的声明 1.3 运算符 1.4简单的小例子们: 例子1 例子2:指针在函数间通信 1.5 指针的运算 1.5.1 指针加减运算 1.5.2 间址运算 1.5.3 指...
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。
数据库优化 - SQL优化
从一个示例入手,带你一步一步掌握SQL优化的技巧!
送给单身猿们的表白神器
问天下男生,有谁想单身?又有谁想单身一辈子? 虽然本人也是单身狗,但是也是有一个远大的理想,哈哈,大白天的我又开始做梦了 原网址:http://wfhuang.coding.me/LoveJuan/ 在找到一个网页的时候就把它收藏下来了,但是后来觉得不爽,为什么我不能把它抠下来呢?然后想怎么改就怎么改!为所欲为,哈哈!怎么抠下来就不说了,大家应该都知道,如果不知道可以私聊我 再借用https://...
相关热词 c#框架设计 c# 删除数据库 c# 中文文字 图片转 c# 成员属性 接口 c#如何将程序封装 16进制负数转换 c# c#练手项目 c#字段在哪加入 c# 的asp网页倒计时 c# 模拟 鼠标
立即提问