下拉菜单显示和隐藏之间的切换

开发工具与关键技术：VS/C#
作者：龙文浩
撰写时间：2019/07/11
基于CSS的导航栏的布局，见截图：

首先布局“你好，请登录”、“免费注册”、“我的订单”、“商城会员”，然后设置Style的样式，如：margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值，分别为上边距、右边距、下边距、左边距；属性值有auto: 计算外边距。即（length规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px。%:规定基于父元素的宽度的百分比的外边距。Inherit: 规定应该从父元素继承外边距。）list-style: 属性在一个声明中设置所有的列表属性。text-decoration 属性规定添加到文本的修饰，none：默认，定义标准的文本，即（underline定义文本下的一条线。overline定义文本上的一条线。line-through定义穿过文本下的一条线。blink定义闪烁的文本。inherit规定应该从父元素继承 text-decoration 属性的值。） overflow属性指定如果内容溢出一个元素的框，会发生什么。为hidden,即内容会被修剪，并且其余内容是不可见的；font-family元素的字体；width为宽度，font-size为设置字体的大小；background背景色；cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状，pointer呈现的光标为一只手状；outline（轮廓）为none,即没有轮廓，color字体的颜色，background-color设置一个元素的背景颜色。Hover伪类，color为颜色;Style样式和html的内容，见截图：


然后分别通过Button、div、a、i标签，布局“我的商城”、“企业采购”、“客户服务”、“网站导航”、“手机商城”的下拉菜单，分别设置文字的字体大小为十三的像素，边框为none,以及设置文字的内边距，通过hover（伪类），当鼠标移到文字时，改变字体的颜色；用div标签包裹住a标签，点击Button,实现展开有序列表，通过Style的样式和html的代码，见截图：


写一个方法，通过文件（document）分别按ID（getElementById）获取“我的商城”、“企业采购”、“客户服务”、“网站导航”、“网站导航”等元素，通过分类表（classList），切换（toggle）显示里面的内容，见截图：

在窗口（window），写一个点击事件的函数，判断（if）目标（target）是否匹配（matches），然后声明文件，分别获取下拉菜单“我的商城”、“企业采购 ”、“客户服务”、“网站导航”、“网站导航”的ID，判断分类表是否包含，包含，就显示内容，否则去除打开下拉菜单，见截图：

执行结果，见头部的图片。