使DIV不被select等控件遮挡的解决办法,巧用CSS制作树状目录

 百家乐概况     |      2020-03-17 01:44

索易电子杂志非常多接纳树状目录,当鼠标点击主目录时,展开子目录;当再度点击主目录时,则关闭子目录。显得简捷明快,朴实无华。制作这种树状目录的秘技比较多,前段时间本人利用CSS能有益地垄断(monopolyState of Qatar目的的“突显”和“隐蔽”属性原理,也创设二个,小编认为用CSS制作那样的树状目录,方法简单易行,代码也少之又少,所以把它写出来,给网上亲密的朋友们共亨,以便在急需的时候也可入手做叁个。先看下边包车型大巴言传身教:当用鼠标在主目录上点一下,就下拉出相应的子目录,再点一下,又复苏原状,其作用与索易电子杂志上的目录效果完全一致。 
  制作方法: 
  笔者先把产生这种功用的代码复制如下,然后结合代码讲制作方法: 
〈div id="main1" style="color:blue" onclick="document.all.child1.style.display=(document.all 
.child1.style.display =='none')?'':'none'" 〉 
+ 主目录1〈/div〉 
〈div id="child1" style="display:none"〉 
〈a href="#"〉- 子目录1〈/a〉 〈br〉 
〈a href="#"〉- 子目录2〈/a〉 〈br〉 
〈a href="#"〉- 子目录3〈/a〉 〈br〉 
〈a href="#"〉- 子目录4〈/a〉 
〈/div〉 
〈div id="main2" style="color:blue" onclick="document.all.child2.style.display=(document.all 
.child2.style.display =='none')?'':'none'" 〉 
+ 主目录2 〈/div〉 
〈div id="child2" style="display:none"〉 
〈a href="#"〉- 子目录1〈/a〉 〈br〉 
〈a href="#"〉- 子目录2〈/a〉 〈br〉 
〈a href="#"〉- 子目录3〈/a〉 
〈/div〉 
  注:“ ”表示一个字符空格 
  1、先定义五个DIV,贰个用来主目录,取名字为:main1;另叁个用以相应的子目录,取名字为:child1。  
    2、在main1的DIV中写上“+ 主目录1”,并在它的下面加载多个鼠标单击事件:onclick 和一小段Javascript程序:document.all.child1.style.display=(document.all.child1.style.display =='none'卡塔尔?'':'none'。这段程序的功力是,当鼠标在main1的DIV上(也正是在“+ 主目录1”上)单击时,即便child1的DIV是东躲黑龙江的,让它显得;假使呈现的,则让它隐蔽。 
  3、在child1的DIV上写上子目录,并把它设置成一流链接,笔者在上头的上行下效中是安装了空链接,实际制作时把它改为实链接,以让它指向链接指标。在child1的DIV定义中增进一个CSS:style="display:none",其指标是使子目录最初时处于隐蔽状态。 
  其余目录的成立只是再一次下面的三步而已。按F12就可寓目效果了。这种措施首假若运用了CSS的显得属性:display,它有贰个特征便是当对象被隐形后,对象所攻克的页面空间将自动让出。大家知晓CSS还两性格质:visibility也具有展现和藏身的对象的功用,但无法用来制作方面包车型大巴树状目录。因为Visibility在隐身对象后,对象所占用的半空中并不自由,也正是当掩瞒子目录时,子目录之处只是一片空白而已地方并不曾让出来,因此另二个主目录也就不可能临近。所以它必须要用来那多少个急需一定页面成分地点之处。

     在IE中,select归属window类型控件,它会“挡住”全部非window类型控件
能够这么清楚,div那样的组件是在浏览器顾客区使用代码“渲染”的,
她们被渲染在顾客区的描绘表面上,
而select是选拔的规范windows控件,只是作为客商区的子控件放置而已,
它会覆盖全数客户区美术表面上“画”出来的上上下下,但不显著会覆盖任何品类的window控件,
举个例子说iframe和任何的select,假如你使用过相像Delphi那样的条件就能够理之当然知道。

有4种办法;

  1. 改良select,不用标准select,而是本人用任何html成分模拟
  2. 改革你的div,使用iframe。
  3. 在div被突显的时候依旧达到select所在地点时隐敝select
    4. 在div中或div的平等坐标上,用相通尺寸的iframe先遮挡一下,然后在iframe上显得div的剧情。

第4种方法的事例:

<html>

<head>

<script>

function DivSetVisible(state){

     var DivRef = document.getElementById('PopupDiv');

     var IfrRef = document.getElementById('DivShim');

    if(state){

                  DivRef.style.display = "block";

                  IfrRef.style.width = DivRef.offsetWidth;

                  IfrRef.style.height = DivRef.offsetHeight;

                  IfrRef.style.top = DivRef.style.top;

                  IfrRef.style.left = DivRef.style.left;

                  IfrRef.style.zIndex = DivRef.style.zIndex - 1;

                  IfrRef.style.display = "block";

   }else{

                 DivRef.style.display = "none";

                 IfrRef.style.display = "none";

   }

上一篇:如何使用,config配置连接字符串的方法 下一篇:没有了