后台管理系统日志（一个小插曲）

关于 css 中的样式简化写法的理解
关于点击展开二级菜单的理解

一. 关于 css 中的样式简化写法的理解

写法①

#menu>div>div:hover{background: rgb(233, 242, 255);
}

写法②

#menu div div:hover{background: rgb(233, 242, 255);
}

以上两种写法看似相同，但是执行结果完全不同，差异就是在 > 这个符号上
写了这个 > 会按照 #menu id 的块级开始逐级 > 到下一个块级

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="menu">1<div>2<div>3<ul>4<li>5<div>6</div></li></ul></div></div></div>
</body><style>#menu>div>div{background: rgb(233, 237, 255);}
</style></html>

这是①的展示结果

不写这个 > 会按照 #menu id 的块级开始跳级找到对应的标签

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div id="menu">1<div>2<div>3<ul>4<li>5<div>6</div></li></ul></div></div></div>
</body><style>#menu div div div{background: rgb(233, 237, 255);}
</style></html>

这是②的展示结果

可以看到 div div 到最后一个 div 之间的 ul 和 li 都被直接跳过了，这也是我在写一个 hover 动作的时候怎么都想不明白的问题，后来灵机一动看到的
这里给上一个搜索标签以帮助当年跟我一样找不到答案的人
#没有设置hover动作确有hover变化# #hover改变了未设置的标签#

二. 关于耳机展开菜单的理解

<script language="javascript">function init(){//先隐藏二级菜单document.getElementById("sub_menu_1").hidden=true;document.getElementById("sub_menu_2").hidden=true;document.getElementById("sub_menu_3").hidden=true;document.getElementById("sub_menu_4").hidden=true;document.getElementById("sub_menu_5").hidden=true;}function f(str){//点击展开折叠效果var sub_menu = document.getElementById(str);var dis_v = sub_menu.style.display;if(dis_v == "block")sub_menu.style.display = "none";elsesub_menu.style.display = "block";}
</script>

HTML对应的点击标签中写入：

onclick = “f(‘sub_menu_1’)”

这个是借鉴了这里的，有兴趣的朋友可以看看

版权声明：本文为CSDN博主「小西瓜吖」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_45711481/article/details/123524337

另外是我自己增加的样式：

function f(str){//点击展开折叠效果var sub_menu = document.getElementById(str);var sub_menu_ = document.getElementById(str + "_");var sub_menu_t = document.getElementById(str + "_title");var dis_v = sub_menu.style.display;var childnum=document.getElementById(str).children.lengthvar obj=document.elementFromPoint(event.clientX,event.clientY);// alert(obj.src)if(dis_v == "block"){sub_menu.style.display = "none";sub_menu_.style.height= "35.73px";sub_menu_.style.background= "none";sub_menu_t.style.background= "none";obj.src="../../static/image/homepage/secondary_menu/add-line.png"}else{sub_menu.style.display = "block";sub_menu_.style.height= childnum * 36 + 36 + "px";sub_menu_.style.background= "rgba(233, 242, 255, 0.37)";// sub_menu_t.style.background= "rgb(233, 242, 255)";obj.src="../../static/image/homepage/secondary_menu/minus-line.png"}
}

展示效果如下：

右边的错误请忽略，那是我在研究框架块
上面主要是在悬停至一级菜单时有个 hover 的动作，并且点击前右边是＋的图案，点击后变成－的图案，同时加上背景色。

#web二级菜单展开#

后台管理系统日志（一个小插曲）相关推荐

我学习上的一个小插曲
放暑假了,我可以自由了,但我却不知道自己要做什么,该做什么,或者说,我想让自己做太多的东西,而没有一些顺序了,最后,我选择了先去一家网络公司实习,锻炼一下,现在已在这家公司快半个月了,虽然公司小,但对 ...
CVS代码管理的一个小错误
前两天去北京参加open day了,客户需要我上传一个文件,在火车上用手机建立了临时热点,却怎么也上传不了,到了酒店居然还是上传不了,一直提示错误 Unable to initialize the C ...
一个小插曲--＞调试PID的工具
最近一直在找一个方便调PID的工具,现在大概发现了两个工具,我在这里给大家献上 1.matble 效果就是这样子代码参考: 这个推文. 但是我觉得这份代码不算特别好,因为根本退出不了哈哈哈,只要运行 ...
npm包管理的一个小错误, No repository field,No description
报错是这样的,这个其实是无所谓的,不用管他都可以, npm WARN xxxxxxx@1.0.0 No description npm WARN xxxxxxx@1.0.0 No repository ...
bootstrap 提交表单给后台_基于Bootstrap的响应式后台管理模板Ace
Ace是一个轻量级.功能丰富,基于Bootstrap3的响应式后台管理模板.支持多种皮肤,集成了多种插件,如Bootstrap,jQuery UI等.支持IE 8/9/10/11.Chrome.Fir ...
Springboot后台管理(CRUD)
一:前言这个就是用springboot实现后台管理(CRUD)的小demo,相比于SSM的配置地狱,springboot的自动配置确实很牛,tomcat都内置,我们想要修改相关的信息只要在yaml配 ...
Django框架项目——BBS项目介绍、表设计、表创建同步、注册、登录功能、登录功能、首页搭建、admin、头像、图片防盗、个人站点、侧边栏筛选、文章的详情页、点赞点踩、评论、后台管理、添加文章、头像
文章目录 1 BBS项目介绍.表设计项目开发流程表设计 2 表创建同步.注册.登录功能数据库表创建及同步注册功能登陆功能 3 登录功能.首页搭建.admin.头像.图片防盗.个人站点.侧边栏 ...
Hook的两个小插曲
看完了前面三篇文章后,这里我们来一个小插曲~~~~ 第一个小插曲.是前面文章一个CM精灵的分析.我们这里使用hook代码来搞定. 第二个小插曲,是如今一些游戏,都有了支付上限,比如每天仅仅能花20块钱 ...
赵小楼《天道》《遥远的救世主》深度解析（37）丁元英参加酒局前的小插曲：从冯世杰的刁难找茬说说“心是愿望，神是境界”
本文是<天道>解读系列按<遥远的救世主>小说情节深度解析的第37集,解读完后会按<天道>电视剧不同于小说部分的情节再补充解读,然后会出专题解读系列,整体共约160集 ...

后台管理系统日志（一个小插曲）

后台管理系统日志（一个小插曲）相关推荐

最新文章

热门文章