javascript - 元素隐藏显示问题
PHPz
PHPz 2017-04-11 12:57:36
0
3
465

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

PHPz
PHPz

学习是最好的投资!

全部回覆(3)
黄舟

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

伊谢尔伦

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

法1

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

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

法2

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

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

Ty80

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

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板