旁门左道通过JS与纯CSS实现显示隐藏层

   想必大家在开发前端页面时，肯定少不了显示隐藏层这一技术点。那么我简单粗暴地总结了以下两个小demo.

   要实现该截图的功能：鼠标移动到我的好友这个选项卡时，灰色的隐藏层就会出现。

 

 1.    通过纯CSS实现。

该方法最简单，最粗暴。

这是部分HTML代码。

 1 <div class="myfriends" >
 2     我的好友
 3     <div class="myfriendsList" >
 4         <ul>
 5             <li><a href="">闺蜜</a></li>
 6             <li><a href="">同学</a></li>
 7             <li><a href="">创建分组</a></li>
 8         </ul>
 9     </div>
10 </div>

 

CSS代码部分（非关键部分已删除） 

 1 .myfriends{
 2 
 3     overflow: hidden;
 4 
 5     position: relative;
 6 width: 90px;
 7 
 8 height: 30px;/*父元素的容器高30px*/
 9 
10 }
11 .myfriends:hover {
12 
13     overflow: visible;
14 
15 }
16 .myfriendsList {
17 
18     position: absolute;/**/
19 
20     width: 80px;
21 
22     height: 100px;
23 
24     top: 28px;/*子容器距离父容器一定要top<30*/
25 
26     left: 9px;
27 
28     z-index: 10;
29 
30 }

 

当你修改成以下样式时，
1 .myfriendsList { 
2 
3     top: 28px;/*子容器距离父容器一定要top<30*/
4 
5 }

 

就出现下面这张可图的效果，当然你鼠标离开时，隐藏层又消失，那么这样永远也无法点击隐藏层的菜单选项。

 

那么，问题来了，我就时要做到截图的效果同时有能点击点击隐藏层的菜单选项应该怎么做呢？

我有个旁门左道的方法，放完整代码。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>发现</title>

    <style>

        .myfriends {

            overflow: hidden;

            position: relative;

            width: 130px;

            height: 30px; /*父元素的容器高30px*/

        }



        .myfriends:hover {

            overflow: visible;

        }



        .myfriendsList {

            position: absolute; /**/

            width: 80px;

            height: 140px; /*比原来的高多40px*/

            top: 40px; /*0<top<61 原因很简单，我用一个空白的容器为父容器和子容器左了衔接*/

            left: 9px;

            z-index: 10;

            border: solid 1px #c6c6c6;

            background-color: #f2f2f2;

        }



        .blank{display: block;

            left: 0;

            position: absolute;

            width: 100px;

            height: 30px;

            top: 30px;

        }

    </style>

</head>

<body>

<div class="myfriends">

    我的好友

    <span class="blank"></span>

    <div class="myfriendsList">

        <ul>

            <li><a href="">闺蜜</a></li>

            <li><a href="">同学</a></li>

            <li><a href="">创建分组</a></li>

        </ul>

    </div>

</div>

</body>

</html>
纯CSS

 

运行的结果如上图所示。

 

当我为.blank 加上background-color: #3273B0;样式时，实际是如上面截图所示。原因在注释里已标注。所谓的衔接，其实是：当鼠标移上我的好友时，空白容器blank就会“拖住”子容器，myfriendsList（前提是你blank的height > myfriendsList的height—父容器的height。）
 
 
2.通过JS实现。

好咯，我又放代码。

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title>发现</title>

    <style>

        .myfriends {

            position: relative;

            width: 130px;

            height: 30px; /*父元素的容器高30px*/

        }

        

        .myfriendsList {

            position: absolute; /**/

            width: 80px;

            height: 100px; 

            top: 40px;/*建议top值不要太大*/

            left: 9px;

            z-index: 10;

            border: solid 1px #c6c6c6;

            background-color: #f2f2f2;

            display: none;

        }

    </style>



    <script>

        window.onload = function () {

            divShow('myfriendsList', 'myfriends');

        }



        function getID(id) {

            return document.getElementById(id)

        }



        function divShow(idson, idFather) {

            var idSon = getID(idson);

            var idFather = getID(idFather);

            var timer = null;



            idFather.onmousemove = show;

            idFather.onmouseout = hide;



            function show() {

                clearInterval(timer);

                idSon.style.display = "block";

            }



            function hide() {

                timer = setTimeout(function () {

                    idSon.style.display = "none"

                }, 200)

            }

        }

    </script>

</head>

<body>

<div class="myfriends" id="myfriends">

    我的好友

    <div class="myfriendsList" id="myfriendsList">

        <ul>

            <li><a href="">闺蜜</a></li>

            <li><a href="">同学</a></li>

            <li><a href="">创建分组</a></li>

        </ul>

    </div>

</div>



</body>

</html>
js实现

   运行后如上截图显示，其实，最主要的是用了setTimeout这个定时器，我让隐藏层出现后，鼠标离开的0.2秒后隐藏层再消失，在这0.2秒里，用户自然会将鼠标移到隐藏层上，从而可以点击隐藏层的菜单选项。
   嗯，当然，记得一定要  clearInterval(timer);否则会出现很大的bug，由于篇幅的问题，我就不外扯了。
 
    好了，我总结的这两个方法实在是旁门左道，不像传统的方法那样规规矩矩。因为我觉得这两个方法古怪而有意思，才写下这篇博客。太简单的谁都会吧，写了还显得自己low。
 如果有什么错误欢迎大家批评指正，我定当立即修改，以免误导他人。
 
 
posted @ 2015-09-24 10:50  刘彦佐  阅读(1705)  评论(0)  编辑  收藏  举报