利用JavaScript实现下拉菜单

Bertha 。 2022-04-22 15:52 251阅读 0赞

实现效果：点击父级标题时下拉菜单会出现，同时其他已下拉的菜单会闭合。再次点击当前打开的父级菜单时，闭合。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70][]

CSS：

* {
    	margin: 0;
    	padding: 0;
    }
    
    li {
    	list-style-type: none;
    }
    
    a {
    	text-decoration: none;
    }
    
    #list {
    	width: 300px;
    	margin: 50px;
    	font-weight: 700;
    }
    
    #list li {
    	overflow: hidden;
    	height: 40px;
    	transition: 1s;
    }
    
    #list li p.tit {
    	height: 40px;
    	background-color: #000;
    	line-height: 40px;
    	color: #fff;
    }
    
    #list li p {
    	height: 30px;
    	background-color: #ff0;
    	border-bottom: 1px solid;
    	color: #000;
    }
    
    #list .show {
    	height: 134px;
    }

HTML：

<ul id="list">
    	<li>
    		<p class="tit">0点击标题</p>
    		<p>2222</p>
    		<p>2222</p>
    		<p>2222</p>
    	</li>
    	<li>
    		<p class="tit">1点击标题</p>
    		<p>2222</p>
    		<p>2222</p>
    		<p>2222</p>
    	</li>
    	<li>
    		<p class="tit">2点击标题</p>
    		<p>2222</p>
    		<p>2222</p>
    		<p>2222</p>
    	</li>
    </ul>

JS：

以下罗列了三种方法，其中一二种方法在注释里，但是点击父级标题不能闭合。

第三种方法是给父级标题做了一个开关。

**主要是利用更换class类名来设定li标签的隐藏与否。**

let aLi = document.querySelectorAll("#list li")
    let aTit = document.getElementsByClassName("tit")
    let len = aLi.length;
    console.log(aLi, aTit);
    
    /* for (let i = 0; i < len ; i++) {
    	aTit[i].onclick = function () { //1
    
    		for (let j = 0; j <= len - 1; j++) {
    			aLi[j].className = ""
    		}
    		aLi[i].className = "show" //1
    	}
    } */
    
    
    // 存 上一次 元素的下标  
    
    /* let index = 0 //0
    for (let i = 0; i <len ; i++) {
    	aTit[i].onclick = function () { //i= 0
    		aLi[index].className = ""; //aLi[2].className = "";
    		index = i //index => 0
    		aLi[index].className = "show"; //aLi[0].className = "show";
    	}
    } */
    
    for (let i = 0; i < len ; i++) {
    	aTit[i].bool = true; //关闭状态 可以被点击打开 给每一个对象 存一下 状态
    
    	aTit[i].onclick = function () {
    		if (aTit[i].bool) { //正关闭 可被打开
    			aLi[i].className = "show";
    		} else {// 已打开  可被关闭
    			aLi[i].className = "";
    
    		}
    		aTit[i].bool = !aTit[i].bool;
    
    		for (let j = 0; j < len; j++) { // 0 1 2  falee 
    			if (j !== i && aTit[j].bool === false) { //目的 清空 已经被打开的 li  并且不能  清空 我当前点击的这个li 
    				aLi[j].className = ""; //关闭
    				aTit[j].bool = true;
    			}
    		}
    
    	}
    
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTczMjQzMA_size_16_color_FFFFFF_t_70]: /images/20220327/ece9d821b7f34766888a8197daa7e7cd.png

发表评论取消回复

表情：

评论列表（有 0 条评论，251人围观）

还没有评论，来说两句吧...

相关阅读

相关用JavaScript函数实现类似下拉菜单的方法

用JavaScript函数实现类似下拉菜单的方法 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_tex

逃离我推掉我的手/ 2023年07月18日 06:42/ 0 赞/ 110 阅读

相关下拉菜单

![在这里插入图片描述][20200614163018558.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

ゝ一世哀愁。/ 2023年02月17日 14:30/ 0 赞/ 217 阅读

相关 JavaScript（js）网页--下拉菜单制作

JavaScript（js）网页–下拉菜单制作在网页的设计中，经常会出现二级下拉菜单，当鼠标经过时，显示二级菜单，鼠标离开时隐藏。例如新浪网 ![在这里插入图片描述]

梦里梦外;/ 2022年12月22日 11:09/ 0 赞/ 213 阅读

相关 js实现下拉菜单

效果：平时在网页上经常会看到导航栏在鼠标经过时，字体颜色和背景会改变，然后会显示下拉菜单。原理：js实现在鼠标经过时，改变字体的颜色和背景，然后下拉菜单显示。一般情况下，

客官°小女子只卖身不卖艺/ 2022年08月23日 05:45/ 0 赞/ 217 阅读

相关 javascript的下拉菜单

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

谁借莪１个温暖的怀抱￠/ 2022年08月21日 08:56/ 0 赞/ 183 阅读

相关 HTML/CSS方法和JavaScript方法实现下拉菜单

最近在做一个简单的网页，模仿我们学校的官网页面。上次做的那个企业网站已经实现了这个网页的大部分模块，主要的技术难点是导航菜单的二级下拉菜单。我在慕课网上找到了一个课程，名字

以你之姓@/ 2022年07月15日 00:54/ 0 赞/ 225 阅读

相关下拉菜单

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;

港控/mmm°/ 2022年06月18日 10:51/ 0 赞/ 335 阅读

相关原生js实现弹性下拉菜单和弹性碰撞下拉菜单

弹性下拉菜单和弹性碰撞下拉菜单，其实基本的实现过程是一样的，不同的是，弹性下拉菜单是围绕着目标点上下弹跳直到停止，而弹性碰撞下拉菜单是在目标点上面做弹跳运动直到停止

曾经终败给现在/ 2022年05月29日 07:10/ 0 赞/ 258 阅读

相关利用JavaScript实现下拉菜单

实现效果：点击父级标题时下拉菜单会出现，同时其他已下拉的菜单会闭合。再次点击当前打开的父级菜单时，闭合。 ![watermark_type_ZmFuZ3poZW5naGVpd

Bertha 。/ 2022年04月22日 15:52/ 0 赞/ 252 阅读

相关下拉菜单的实现

CSS实现下拉菜单： <!DOCTYPE html> <html lang="en"> <head> <meta charset="U

落日映苍穹つ/ 2021年12月16日 08:53/ 0 赞/ 398 阅读