javascript - 元素隐藏显示问题

Question

1 一个erp里有多个表单 出库 入库 商品 规格 联系人 之类的 一堆表单
2 点击 出库 入库 商品 这3个表单的时候 会弹出 一个悬浮层展示详细信息， 悬浮层出来以后 点击除了出库 入库 商品这三个表单和悬浮层本身以外的任何地方都把悬浮层隐藏掉？请问如何做？

Answer 1

你这个涉及到js和css
css悬浮层: opacity:0; position: fixed;
js:
弹出悬浮层：点击相应表单的时候，给相应按钮添加事件，改变样式opacity:1;
悬浮层本身阻止冒泡
给window添加事件：改变样式opacity:0;

Answer 2

写的好乱不太明白意思，不知道理解的对不对，粗略想下平时就这么弄呗：

法1

做个标记 鼠标移入你不想点了隐藏的地方 就false，不然就true

click事件的时候通过这个mark的值做判断是否隐藏整个层

法2

<p class='mask'>
    <p class='box'>
        <button>click</button>    
    </p>
</p>

给mask加点击事件，隐藏mask
给button也加点击事件，return false阻止冒泡。
这就只有点button的时候不会隐藏

Answer 3

楼主你这问题......，你是要做个导航栏切换的样式吗————点击一个栏目，显示出对应的信息 ，其他栏目的信息隐藏？如果是这样的需求，你可以html+css+js实现：html的架构差不多是一个ul作为菜单栏（出库、入库、商品）后面一个p，作为栏目下面你的内容显示区域，里面包含多个表（表的先后顺序要和ul菜单栏下的菜单项顺序一致）。css的样式就是给菜单栏想要的基本样式，给p内详细信息表做隐藏处理（display:none）。然后就是用js加上隐藏显示切换效果了，大概思路：首先遍历菜单栏下的菜单项（li）,绑定点击事件（onclick）,给点击的项动态添加样式名（class:selected）以对其做样式处理（颜色，字体等样式改变），并记录其下标，然后获取p信息显示区内的表，取出相应的表（下标一致的），动态显示出来（display:block/inherit）。完成