< meta charset = "UTF-8" > < meta http - equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title > Document < / title > < style > margin : 0 ; padding : 0 ; ul , ol , li { list - style : none ; cursor : pointer ; font - style : normal ; width : 300 px ; border : 1 px solid pink ; margin : 30 px auto ; ul > li { /* 段落缩进20px */ text - indent : 20 px ; ul > li > ol { text - indent : 40 px ; display : none ; < / style > < / head > < li class = "first" > < i class = "f" > + < / i > < span > 一级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < li class = "first" > < i class = "f" > + < / i > < span > 一级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < li class = "first" > < i class = "f" > + < / i > < span > 一级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < li class = "first" > < i class = "f" > + < / i > < span > 一级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < i > + < / i > < span > 二级菜单 < / span > < / body > < / html > < script src = "../jQuery/jquery-3.6.0.js" > < / script > < script > // jq菜单案例 // 点击ul>li，让li中的ol折叠展示或隐藏 $ ( '.first' ) . click ( function ( ) { // 在被点击的li$(this)中找到ol二级菜单进行下拉切换 console . log ( $ ( this ) ) ; //li $ ( this ) . find ( 'ol' ) . slideToggle ( 300 , function ( ) { // 折叠动画结束后，设置.first标签中的i.f文本 // 如果二级菜单ol处于隐藏状态，时，i.f文本是+ // 否则是- console . log ( $ ( this ) ) ; //ol if ( $ ( this ) . css ( 'display' ) === 'none' ) { $ ( this ) . prev ( ) . prev ( ) . text ( '+' ) } else { $ ( this ) . prev ( ) . prev ( ) . text ( '-' ) . end ( ) //回到 被点击的li . siblings ( ) //找到其他未被点击的li . find ( 'ol' ) // 找到未被点击的li中的ol . slideUp ( 300 ) . end ( ) // 回到上一次操作的li . find ( 'i' ) //找到i元素 . text ( '+' ) // end() 方法 在jq链式调用中，回到上一次操元素集合 // 例； // $('ul').find('li') //得到的是li元素集合 // $('ul').find('li').end() //得到的是ul元素集合 < / script > 大家都知道 jQ uery是一个框架，它对 JS 进行了封装，使其更方便 使用 。前面两篇博文分别是用CSS样式和 JS 实现 的，那么这篇就用 jQ uery来 实现 二级下拉式菜单。 使用 JQ uery 实现 需要用到的知识有： 1) 使用 $(function(){…})获取到想要作用的HTML元素。 2)通过 使用 children() 方法 寻找子元素。 3)通过 使用 show() 方法 来 显示 HTML元素。 4)通过 使用 hide() 方法 来 隐藏 HTML元素。 5) jQ uery库引用 方法 : 第一种 方法 ：将 jQ uery库下载到电脑上，然后引用，我下载的是 jq uery-1.7.1.min. js 这个版本。 .addClass("plus") //添加plus类名 .click(function(e){ //添加单击事件 if($(e.target).children().length){ //判断当前事件源有多少个子元素 $(this).toggleClass 我们这一篇来用 JavaScript 脚本 实现 下拉菜单的 显示 和 隐藏 。 使用 JavaScript 方法 实现 我们需要用的知识有： 1) JS 事件：onmouseover鼠标经过事件和onmouseout鼠标离开事件。 2) JS 基础语法： 使用 function关键字定义函数。 3)DOM编程：getElementsByTagName() 方法 。 那么接下来就是我们制作的流程： 1) 隐藏 二级菜单 ：设置CSS样式,让 二级菜单 隐藏 。 2)编写 显示 子菜单showsub()函数： 使用 getElementsByTagName获取 二级菜单 项；通过style.display设置 二级菜单 显示 。 3)编写 隐藏 子菜单hidesub() &lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Page Title</title> <meta name='viewport' content='width=device-width, i.. <script> window.onload = function(){ var dt=document.getElementById('menu').getElementsByTagName('dt'); for (var i = 0; i<dt.length; i++){ dt[i].onclick = function(){ nex = this.parentNode.getElementsByTa 转自：http://blog.csdn.net/supercoooooder/article/details/50755427&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;Dropdown&lt;/title&gt; &lt;meta charset="utf-8" /&gt;