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

2022-09-25 09:49:22

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

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

aaarticlea/png;base64,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" alt="" />

1. 通过纯CSS实现。

该方法最简单，最粗暴。

这是部分HTML代码。

 <div class="myfriends" >

     我的好友

     <div class="myfriendsList" >

         <ul>

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

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

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

         </ul>

     </div>

 </div>

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

 .myfriends{

     overflow: hidden;

     position: relative;

 width: 90px;

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

 }

 .myfriends:hover {

     overflow: visible;

 }

 .myfriendsList {

     position: absolute;/**/

     width: 80px;

     height: 100px;

     top: 28px;/*子容器距离父容器一定要top<30*/

     left: 9px;

     z-index:;

 }

当你修改成以下样式时，

 .myfriendsList { 

     top: 28px;/*子容器距离父容器一定要top<30*/

 }

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

aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAAAAE1CAIAAAAZHa6PAAAVCElEQVR4nO2dPY8T2ZqAnRHc+EYbbLihk4kmu//hpo423uRGpXU3LfExxmqY1ojGTEvQXLTIiO0dYXRbloALzF1a7ArMDHfaiNFqGN1uAoaAlqY9gSNqg/rwqapzqsp22V1vnecJRkO5vnz8Puc9X11Vc0+CZ8+ench1AQSRR5PaEu4jCQIDZILAAIJBYADBIDCAYBAYQDAIDCAYBAYQDAJDSRgfDe9vr39563/fn/SdSAKBhfBoy0nQXD3T2rh+99nh2Hzc6M3jnesbrTOrTeWQncdvRsldX++0k9dYWTt7cbN7X7d/wPjw5W538+LZtRX1kN2XabelvdXv76w3Hae5vrM/5ZEWg8BC0Akcinzm2iNN2hof/u3mhRXDMSsXbv4tZphW4HD/S9/otBp9f/fymabpti7f/X6U9wJTsPWo2LKVDAILwRe4vfM63DT68Orx7a/WPFnWv3kdPeD9o621wKPbj199GE2OCZRb24p4H/il+DE++un57rUv/N2vffsxconx/s6699HKhe3d5z8djcNjtv2aI5JOEbh4EFgIGoFd13Xd8f4dz4qzt14om9/3N5sJgZSDfPOaG/fehls1Avsne3j1tOM4jrPZVwwev7h1TlcPBAcFFcjajT19i/jji3tbF1bXzZ3e8f7OpbX1rbv0is0gsBBMArvu/p1Wwrv/ubnmOI7T3OybYj8w/PT200Avo8Du+OHVxNUP/vJV03Ec59ytF4Yea2j4pbtv9Tt49UjzixtPzTXA2pX+/9ElNoLAQjALrPFu78bpmJxJxk+3TzuO4zS3Ho2NJzJf/eDeRqqcruu67tu7l0x3HdyF5/DqV7s/Rba/f3rji6ZJbZiAwEIwCjx+tOWl0ht7waYXt846juM0r32bekpf87DtbRY4+GTj3oG/5WN/03Ecx1n/5se0SwSaq23veXvC5trARhBYCCaBg6bwudvfBZtyyhXaFWhpEjhoCjev3A81zFlHhG2BSe2CwIWCwEJICjz68GZvxx9QjgwQpzSFU8+ZPG589O7VfX9AOTrObW7RR9Hci7cp10jy+Gi417u5cW6VqWETCCwE8zzwyqXb0WHaeQVO0jxzNTaStECBx0fvXu3t7lzfOO8vPnFW1i5u/eW7XzO+jZ0gsBAMAq//5zCRmgoWeHXrr0dZhxrJJfDowz/ePH+yu3NTWc7lOM3V8xvXdx4E08ugBYGFEDcmZaI36ANPhpz0xEeY4rKlTfT6fWC1b6slPlDmRgUe3v1yNbKOa2WttfF1t7cXLDxxXXd8+Gznyvmrxgkxu0FgISRTXrhSIjETW9go9GTBR3xCed5R6OCi7/ubq2utja9v7uzuvXoXy7Wjn/fubgWLQc/c2KMRnQSBhaBrs3789tqaNkVOMw882Unb9H79zbo20081DxzZ6dFWVtt7fDR8vLO1HnaBz125/XhIQ1oLAgtB3+kMF1JGU+R474a3EktdKRkl/0qscCFlNNO/vbfhDYCbVkoaVmJ5q7p0Ao8+vNrrdTdDcZur61s7mJsOAgvBvBZ6R5ciJ13kO98n/xLQ/8O93Guhw2XNaqZXusgPk385OD58qF8L7a38vPrQ3zb68Ob5g52bmxfV0av1ze7u85+V+x4fDR/fvnxh6yEd4RgILISUYd8gFzrtO6rCRfw1UkCQ0p3TVxWHpv1rJNcNOs+tO/uu++uT62vKCNbK2sXN7m5s0DnWmj7zH89nKr3qgsBCSJ23MaTIGf8eWDv9ZMj0U/09sOu6H+9faU4Gr7+7/cXq+Y3rO7vqqLN33g+vHu9c3zgX3H5zdX3r7t7PKY8VsBQEFkLGxGuocCRFujM9kcMwfzzJt5FMP9UTObxLmAbXRh/ePH/S62Y0p0EFgWFZBDXAZNn2+Ojdm+dPHvS61zcvnlEnhJur5zdu9hJ5GRIgMCyJX/97ey1oIvz65MbZ1XjLW7OIA7JAYFga4/2dy/7Tu8Yvbp1bWTt79uLm9W7vwd6rfyDtbCAwgGAQGEAwCAwgGAQGEAwCAwgGgQEEg8AAgkFgAMEgMIBgEBhAMAgMIBgEBhAMAgMIBoEBBIPAAIJBYADBIDCAYBAYQDAIDCAYBAYQDAIDCAaBAQSDwACCQWAAwSAwgGAQGEAwCAwgGAQGEAwCl5teo1Zr9E76Lk4SSiAVBC43hC8lkAoClxvClxJIBYHz0mvU6u3hCVzV8vClBFKxQ+Bhu66Xb9iux6Jj2K7XalpVe43a8kOpmPAdtuvG2idZBOViAQLnr4t7jVKXjWuNwMN2o5bUz1OyPYz/lj3dzv72JWfhOcPXD9VAYEXkyYnNlxi265qP0mqDBbCIDJzzKwzbdS88vFpdxwk0yqLYIbDruokMqo9OdedGz/zDBQQn8JyPb3WNP33ekJw3fD2D/YDV+mu+hn67bmv022uiW91hyq+zmCZ0DoWVpol+79jW6E+dVkRFfp3KC2yIrVmUMio/bNeVaDU3wpU7WpbAXpD1lP8OXX3o6SIueWVjZ0RzXbWyiNZ00+StAgWOnCpD4cS+esIzRL5kPASSJVCYw5UXOElq6s3qLRoEbke2pv1EUdkzmTt8h+16rd5oBP9pD/U9gfgtR6476Qn2GpF6yvg9lNMlCmPKAF6UwGpXOD4OEH63WBckSmRrrx35XP2Z43EzZQikg8CxD4c9r7bV7JDe6FYwh6hXNU8Rj4UPYhm9U75dZB9ve3s4dN1eQ3W6Vqs3etooVLNsMlqXXYVNvo/xVIkm1KSh0ui5uTKw+YyGEiioUkJgHfrRqpzlnpJhpm4/FjCINW1PQROsSirNG7tpTebpUvD8Aqv5NLVhlJyPSK310togyteeuwpLBYGLOzCI8LTm+bRXLiQDxwLGMCygucykIlOky/gaMWM1ey9b4PAMqaeKVdpzSRb50pqvW2A3uNoC5x7BMoVwxjB0Sp7VD99OHRJFCBx+CfXi0fShvYx2Y4a+Jl/jRi9R4DwTZsGnwW36N6lUXlNEgbe/fnjLuGlWqi2wDtMkr4q5yZSr2HW19yzp1y1EYD/+6u12fGB1cuLkZcxzwFljt5rPVQW8+1heH1jxMuNUwVf2e/3po9Sm9nOyfkqWJE3o2QmnVdLKz/Dj5G97J2vYmdKvW9AodBiMk0mg2FeMr02KtZ3VoRy1Ha0LzMzbnXIhyJwloF7NdKroOhc/ODJuU/+xLjvQBy6OiYJpCwhNC65MAsdnkZI/0Izp1y0qfBPRFt8QETjSbzDMhRrXmmbG5bTL2eYrgehUT8qKlcQtqUPXGaidXVM/jGmkuYmVmzGfGiPMLLBmjCgx8znbLzZ3+IbVVdrCjSmToula2ZXUDJ2/xc0DB5h7C0q0xNfbaqpA82/MQo55MayOMi1pMP/lQ9q4lSE95el0Gyl8Hlhb/xczVZNaboYBn2wKFHiqoY3YMo167Pvp6kRjbnZZSjk7GaOesY/V8M41hl3kj6GhYIGjtb8SdZmTTCdVAMWuhc70LLrrDINYy6bSAqelhSixkf/ysJil/JI4qRJIG6VaTtWVi0oLXAEQmBJIBYEBBIPAAIJBYADBIDCAYBAYQDAIDCAYBAYQDAIDCAaBAQSDwACCQWAAwSAwgGAQGEAwCAwgGAQGEAwCAwgGgQEEg8AAgqmawM9AgdKbh/KUXvpFM29MmMCF34lQZgvBRdyJRMpTeghsKeUJQYmUp/QQ2FLKE4ISKU/pIbCllCcEJVKe0kNgSylPCEqkPKWHwJZSnhCUSHlKD4EtpTwhKJHylB4CW0p5QlAi5Sk9BLaU8oSgRMpTeghsKeUJQYmUp/QQOMR/N2S9PXR7jVqjp33Z9bBdj70Nr9fQvnhU2ZzztbPDdn2JbzAtTwhGCQor8ppiTbnEfoglv6WwPKVnvcCTV7oqUeIJ7LpuPH60/moDx7TdNb70PeWIBVCeEHRdV/0Z4mWgryCH7Xqt0Uh72/hCy7LA0jv88x//OYs//vlwtjuxQGCfaPrTJsN4Im30NMlVybradBrL6jlfeL+AYCyZwB7J+lHvr2a/5VJg6b39+g+nMn7+U3/4+u1sd1J5gQ2t2yT19jDiZK9Ra/TiceTtEZdS2SMt8GZPwL893d5++Zvy75fb209/M+/vum7ZBNZUZF5h6PxVKkHT77fovkh5Ss9ygUNiGVNnU1zgej3eOZvsMWzXwwDMJ7ChK53Nj5c/P1Wrnfqs/fex67ru+O/tz07Vaqc+v/xj6mHlCUGFRE82rCejvZh6fZnDBRrKU3oI7GEWOPwkmYHdmKChhJFj6qYkH7tg9k56fnn675+dqtVqv/v8y5cvv/z8d7Va7dRn519mpODyhGBImE7D76yUstI3afTC8jUVGxk4/0WrIbAaCUpzWR1v0vWB3cgoVxBvqr/xNrZxyKveaMTTSu6s/EvvX/8p7Eid+pd/e/BL5iHlCUGfYbtebzTqtUYvzMOT2jFWEssdsNdAH3heihJYETcSEuH2iW/aDBz5REkY4RBXxFeDwEEdEI3L6WZGfuk1fl+r1Wq/b/Sy7XVLJ7BXMkH5BIMJkYazbpDR1Ade9AgXo9DzsuAmtCdwEAZe/W8W2E1uTExnhlu1hyXSea8xdTtw/O6//vSnfPa6ZRPYHzOIlE+vkRwgjP9Dl4qXMURdntJDYA8lErzkqwxR+RGRKXA0cpR1IYY9JvvFm9myckhxKOWjza3p4xLJkyyM8pQeAnt4kRCdpQ3U8jtghj7whElHbXKeqJ7JeIt8PnHe/78FxmF5QlBh4p5f2LGOr2I3Teg8d2KBwMmhTxVVJH0GjoRQsJ9uAabuKrGqQVclLCoeSy5w+qdVysAMYi38qEpSSoHFUJ7SQ2BLKU8ISqQ8pYfAllKeEJRIeUoPgS2lPCEokfKUHgJbSnlCUCLlKT0EtpTyhKBEylN61gkMIZTePJSn9NIvmnljkgQGsAoEBhAMAgMIBoEBBIPAAIJBYADBIDCAYBAYQDAIDCAYBAYQDAIDCMYugRe3WrWcFF6AUDby/MqVEvjYGhDYBhC4siCwDSBwZUFgG0DgyoLANlBegQeDwWg0KvacCAxVYjQaDQaDzN1ORuCDg4P9/f1iHUZgqAyj0ej169cHBweZe56MwJ8+fTo8PBwMBsXOrJy0Vsuj2HKDsjEYDA4ODj59+pSp0skIvAieWSbwSZc3lAIEFgkCgwcCiwSBwQOBTQy6LafVHQT/q6PT1xzX7zjBcYsDgcEDgdMYdFt6S4+Pj/sdp9M3y53H9dlBYPBAYD2DbiuaRvsdJ7EhEDhi56DbClJwv+OZ6+9aIAgMHgisJxBYn2DjVvY7TqvbV1Tud/w9Wy1zDp8DBAYPBNaTOwNPOr2DbsvpdD3hw086/eSpCgCBwQOB9XjWhYk0jveZklr1e04GwWhCw0JAYD15M3DQxFYEXUTGjYPA4IHAenwLDSnY/0jtAy9tAPr4+BiBIQCB9UzRB45/qB6aNg81DwgMHgisZ9BteePKxrRKBoYSgMB6Mjuy5tyqHrqoZVkIDB4IrCdF4HBqeDKLlA2j0LAQEFgkCAweCCwSBAYPBBYJAoMHAosEgcEDgUWCwOCBwCJBYPBAYJEgMHggsEgQGDwQWCQIDB4ILBIEBg8EFgkCgwcCiwSBwQOBRYLA4IHAIkFg8EBgkSAwePB6UZEUW25QNsr+etHDw8MffviBF3zPzDMycKUZjUb7+/uHh4eZe56MwIPBoFh7XQSGajEajQaDQeZuJyPwIuKvYIFzPCknfEyO8nws5Z2GsU8KBYFtIM+vjMAGEo+RjRI3M+Zwpz/5n8GAh9rBLCDwHOQWONdD7Yp+MiUC2wACz0H4wkG9j31V4IxGckZdMAsIbAMIPAczNKGXkXp9ENgGEHgOQoETTeTwvcGpidczehEDWMfHCGwHCDwHqsDR14hmC7xYeY+PEdgOEHgOcgpsajovuCmNwDaAwHMwexN6UXO/KghsAwg8B4YMHIDAsHAQeA6mHIXO91FhILANIPAcGARWGtRxSZXu8KL9RWArQODKgsA2gMCVBYFtAIErCwLbAAJXFgS2AQSuLAhsAwhcWRDYBhC4siCwDSBwZUFgG0DgyoLANoDAlQWBbQCBKwsC2wACVxYEtgEEriwIbAMIXFkQ2AYQuLIgsA0gcGVBYBtA4MqCwDaAwJUFgW0AgY0Mui3to16DB+moj6KcPB8n62lXkdeaGZ6oVcx7VhDYBhDYQL/jOJ3+oNsK7Bx0W+EjKFW9vB31D39OaOjv7GFQOLzQsf6R0nndRmAbQGCzvco/Wt2BVuCkg5FXEkY+UiqDyIVi2/qdybOmO914Pp8iOSOwDSBwHF1e7HecVqeTEHjyf2kvXwhfzqA3zzs0+CzQN3hvMAJDKgic0KnV6cRt9B2MCqxKq+sDh66l9HajFnf68SfS0oSGdBBYb1PSSFMf2H8vQ1YfOCtHR68fHEgGhnQQOIfAQcKNCqxk4pioaaPQcQMj3W3dxREYUkDgJFFrEp6qb0TyBrecTj/5fjN9c1dnZOzNhurBNKEhHQQ2CTxxxziN5I9tpWRQ/anVLekplQwM6SBwDmuijWTVIX+KKaWHq+qmGc3SDnAFadirRRAYzCBwtsCxf2snjyKrM7QZWDPlm5wbDkajTbeCwBAFgTUk8mksyYazSOpgccoYs05L5WPDXeh71RkHIbBlIHBlQWAbQODKgsA2gMCVBYFtAIErCwLbAAJXFgS2AQSuLAhsAwhcWRDYBhC4siCwDSBwZUFgG0DgyoLANoDAlQWBbQCBKwsC2wACVxYEtgEEriwIbAMIXFkQ2AYQuLIgsA1YJ7BVFF6AUDby/MrVERigYiAwgGAQGEAwCAwgGAQGEAwCAwgGgQEEg8AAgkFgAMEgMIBgEBhAMAgMIBgEBhAMAgMIBoEBBIPAAIJBYADBIDCAYBAYQDAIDCAYBAYQDAIDCAaBAQSDwACCQWAAwSAwgGAQGEAwCAwgGAQGEAwCAwgGgQEEg8AAgkFgAMEgMIBgEBhAMAgMIBgEBhAMAgMIBoEBBIPAAIJBYADBIDCAYBAYQDAIDCAYBAYQDAIDCAaBAQSDwACCQWAAwSAwgGAQGEAwCAwgGAQGEAwCAwgGgQEEg8AAgkFgAMEgMIBgEBhAMAgMIBgEBhAMAgMIBoEBBIPAAIJBYADBIDCAYBAYQDAIDCAYBAYQDAIDCCaPJv8PEfs2tIOw7YkAAAAASUVORK5CYII=" alt="" />

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

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

<!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

aaarticlea/png;base64,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" alt="" />

运行的结果如上图所示。

aaarticlea/png;base64,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" alt="" />

当我为.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实现

aaarticlea/png;base64,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" alt="" />

   运行后如上截图显示，其实，最主要的是用了setTimeout这个定时器，我让隐藏层出现后，鼠标离开的0.2秒后隐藏层再消失，在这0.2秒里，用户自然会将鼠标移到隐藏层上，从而可以点击隐藏层的菜单选项。

   嗯，当然，记得一定要  clearInterval(timer);否则会出现很大的bug，由于篇幅的问题，我就不外扯了。

    好了，我总结的这两个方法实在是旁门左道，不像传统的方法那样规规矩矩。因为我觉得这两个方法古怪而有意思，才写下这篇博客。太简单的谁都会吧，写了还显得自己low。

 如果有什么错误欢迎大家批评指正，我定当立即修改，以免误导他人。

码农公寓

相关文章