点击折叠菜单（HTML/CSS/JS）

HTML

   <ul class="menu"><li><h3>HTML</h3><p>超文本标记语言，标准通用标记语言下的一个应用。 “超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。 超文本标记语言的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。</p></li><li><h3>CSS</h3><p>层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。</p></li><li><h3>JS</h3><p>JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML网页上使用，用来给HTML网页增加动态功能。</p></li><li><h3>JQ</h3><p>jQuery是一个快速、简洁的JavaScript框架。jQuery设计的宗旨是"write Less，Do More"。它封装JavaScript常用的功能代码，提供一种简便的JavaScript设计模式，优化HTML文档操作、事件处理、动画设计和Ajax交互。</p></li></ul>

CSS

    *{margin: 0;padding: 0;list-style: none;}.menu{width: 300px;height: 400px;border: 1px solid #ccc;margin: 50px auto;box-shadow: 2px 2px 5px #333;}.menu h3{height: 50px;line-height: 50px;text-align: center;border-bottom: 1px solid #ccc;cursor: pointer;}.menu p{/* height: 0; */text-indent: 2em;line-height: 1.5em;background-color: #ccc;padding: 10px;display: none;overflow: hidden;}.menu li:first-of-type p{display: block;}

  var titles = document.getElementsByTagName('h3');var texts = document.getElementsByTagName('p');// 因为for先于回调函数（异步）执行完，如果在回调函数中获取i的值，将得到的是for循环完了之后的值/* for(var i=0;i<titles.length;i++){ titles[i].onclick = function(){for(var j=0;j<texts.length;j++){if(j == i){texts[j].style.display = 'block';}else{texts[j].style.display = 'none';}}}}   */// 上面代码是不可行的// 方法一：将for中的var改成let，let有闭包的作用（let属于ES6写法）/* for(let i=0;i<titles.length;i++){ titles[i].onclick = function(){for(let j=0;j<texts.length;j++){if(j == i){texts[j].style.display = 'block';}else{texts[j].style.display = 'none';}}}} */// 方法二：用JS闭包实现  for(var i=0;i<titles.length;i++){(function(i){var buy=false;titles[i].onclick=function(){for(var j=0;j<texts.length;j++){if(buy==false){if(i==j){texts[j].style.display='block'buy=true}else{texts[j].style.display='none'}}else{texts[j].style.display='none'}}}})(i)}/* (function(){...})()为自执行函数（函数自身调用自身），也可以叫立即执行函数（IIFE）*/

点击折叠菜单（HTML/CSS/JS）相关推荐

html 小三角折叠菜单,html+css+js下拉列表小三角
本篇文章主要介绍html+css+js下拉列表小三角,感兴趣的朋友参考下,希望对大家有所帮助. gadf .zijisanjiclass{ width: 220px; border: 1px soli ...
html点击展开菜单,简单实现js点击展开二级菜单功能
虽然,jQuery已经非常好用了,但是实际的开发项目中,还是有很多限制,比如项目组奇葩的要求,不能使用任何插件,当然,也是考虑插件占用资源,毕竟100+KB对与小型项目来说还是非常大的.我最近就遇到做 ...
html多级折叠菜单表单,JS实战篇之收缩菜单表单布局
获取节点的两种方式: 1.通过event对象的srcElement属性: 2.通过事件源对象用this传入. 代码如下: 收缩菜单 · 表单布局 function list(dtNode){ // v ...
html下拉折叠菜单,原生Js_实现简单的下拉折叠菜单(添加弹出动画效果)
用javascript实现简单的下拉折叠菜单 Gary_js实现简单的下拉折叠菜单 *{margin:0px; padding:0px;} #div1 {width:200px; margin:0 a ...
笔记九：EgretH5通用MVC框架的操作：制作折叠菜单FoldList（UI部分）
前言:由于时间比较紧,这次的博客更偏向笔记性质,而不是教程性质,必须打开源代码,接着再一步一步参考以下的笔记,不然很多细节上的东西漏掉了运行时会出现不少问题. 源代码:笔记九Egret-折叠List源 ...
CSS+JS仿QQ面板风格的多级折叠下拉菜单
<html><head><title>CSS+JS仿QQ面板风格的多级折叠下拉菜单丨石家庄玻璃隔断|石家庄自动门</title><style ty ...
jquery折叠菜单、jquery侧边栏菜单、CSS侧边栏菜单
jquery折叠菜单.jquery侧边栏菜单.CSS侧边栏菜单一.Jquery折叠菜单效果二.jquery侧边栏菜单效果三.CSS侧边栏菜单效果先上代码 <!DOCTYPE html&g ...
jq 手风琴折叠菜单 js滚动效果 collapse.js slideUp()
功能类似 collapse.js 插件的效果案例一,简单版本 <style>.hn_column a{color: #000;} .hn_column li{background:#cc ...
JS实现网页动态折叠菜单
最近做了一个多级菜单列表动态展示的功能,其中用到了vue.js渐进式框架.aui.css等,在此记录一下,也便于自己日后总结. 说明:vue.js不是必须要用的,因为我们项目中页面用的都是vue,因此 ...
Java Swing编程之仿js树状折叠菜单
最近要完成一个需求:用swing做个树状菜单,含二级菜单,点击一级菜单展开二级菜单,且二级菜单数目超过预览视图会出现滚动条.由于swing研究的少,花了不少精力! 先看下测试效果图: 收起图: 展开图 ...

点击折叠菜单（HTML/CSS/JS）

点击折叠菜单（HTML/CSS/JS）相关推荐

最新文章

热门文章