2024年Web前端最新点击页面其他部分关闭当前下拉框_js点击空白处关闭下拉面板，【性能优化实战】

本文链接：https://blog.csdn.net/2401_84446919/article/details/138488853

打开全栈工匠技能包-1小时轻松掌握SSR

两小时精通jq+bs插件开发

生产环境下如歌部署Node.js

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

网易内部VUE自定义插件库NPM集成

谁说前端不用懂安全，XSS跨站脚本的危害

webpack的loader到底是什么样的？两小时带你写一个自己loader

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      \* {
        margin: 0;
        padding: 0;
      }
      li {
        list-style: none;
      }
      .tab-list {
        background-color: #001529;
      }
      .userBox {
        display: inline-block;
        height: 40px;
        width: 80px;
        line-height: 40px;
        margin-left: 100px;
        text-align: center;
        color: #fff;
        cursor: pointer;
      }
      .userBox span {
        padding: 0 8px;
      }
      .user-dropdown-box {
        display: none;
        position: relative;
        font-size: 12px;
        z-index: 1;
      }
      .dropdown-list {
        position: absolute;
        top: 0px;
        left: 100px;
        width: 140px;
        background-color: #3b3d4c;
        color: #fff;
        text-align: left;
      }
      .dropdown-item {
        width: 120px;
        height: 40px;
        line-height: 40px;
        padding-left: 20px;
        cursor: pointer;
      }
      .dropdown-item:hover {
        background-color: #43475e;
      }
    </style>
  </head>
  <body>
    <div class="tab-list">
      <div class="userBox">
        <span>admin</span>
      </div>
    </div>
    <div class="user-dropdown-box">
      <ul class="dropdown-list">
        <li><p class="dropdown-item" onclick="loginOut()">登出</p></li>
        <li>
          <p class="dropdown-item" onclick="updatePassword()">修改密码</p>
        </li>
      </ul>
    </div>
  </body>
  <script>
    // 点击admin用户区域，展示或隐藏下拉框
    function showDropdown() {
      const dropDown = document.querySelector(".user-dropdown-box");
      const userBox = document.querySelector(".userBox");
      const userBoxSpan = document.querySelector(".userBox span");

      //当鼠标点击userBox时处理下拉列表的展开/收起
      userBox.onclick = function (e) {
        if (dropDown.style.display == "none" || dropDown.style.display == "") {
          // 展开
          userBox.style.background = "#3b3d4c";
          dropDown.style.display = "block";
        } else {
          //收起
          userBox.style.background = "#001529";
          dropDown.style.display = "none";
        }
        // 阻止事件冒泡，防止外部监听点击事件的函数被userBox.click影响
        e.stopPropagation();
      };
#### 最后更多分享：**前端字节跳动真题解析**

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

- ![](https://img-blog.csdnimg.cn/img_convert/d9671713be51a97fb2877a0372a95b04.webp?x-oss-process=image/format,png)



*

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

- [外链图片转存中...(img-uxFBQBqW-1714966272863)]