点击DIV外部时关闭菜单

问题描述 投票：0回答：1

在移动视图上单击 div 外部或调整浏览器大小时，我需要关闭菜单。

See screenshot here

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
  <title>Admin Dashboard | Keyframe Effects</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
</head>
Style section

<style>
  @import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500;600&display=swap');
  :root {
    --main-color: #34425A;
    --color-dark: #34425A;
    --text-grey: #B0B0B0;
  }
  
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    box-sizing: border-box;
    font-family: 'Merriweather', sans-serif;
  }
  
  #menu-toggle {
    display: none;
  }
  
  .sidebar {
    position: fixed;
    height: 100%;
    width: 165px;
    left: 0;
    bottom: 0;
    top: 0;
    z-index: 100;
    background-color: #d6eaf8;
    transition: left 300ms;
  }
  
  .side-menu ul li:hover {
    background-color: #1b4f72;
  }
  
  .side-menu a {
    color: #555;
    font-size: 1rem;
  }
  
  .side-menu a:hover {
    color: #fff;
    /* Change menu hover text color here */
  }
  
  .side-header {
    background-color: #2471a3;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .side-header h3,
  side-head span {
    color: #fff;
    font-weight: 400;
  }
  
  .side-content {
    padding: 2rem 0rem;
    height: calc(100vh - 60px);
    overflow: auto;
  }
  /* width */
  
  .side-content::-webkit-scrollbar {
    width: 5px;
  }
  /* Track */
  
  .side-content::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }
  /* Handle */
  
  .side-content::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 10px;
  }
  /* Handle on hover */
  
  .side-content::-webkit-scrollbar-thumb:hover {
    background: #b30000;
  }
  
  .sidebar {
    /*overflow-y: auto;*/
  }
  
  .side-menu ul {
    text-align: center;
  }
  
  .side-menu a {
    display: block;
    padding: 1rem 0rem;
    text-align: left;
  }
  
  .side-menu a.active {
    background: #1b4f72;
    border-bottom: solid 1px #d6eaf8;
  }
  
  .side-menu a.active span,
  .side-menu a.active small {
    color: #fff;
  }
  
  .side-menu a span {
    min-height: 15px;
    display: inline-flex;
    align-items: center;
    font-size: 1.7rem;
    margin: 0rem 0.5rem 0rem 0.5rem !important;
  }
  
  .side-menu a small {
    font-size: 0.95rem;
    /* Sidebar font size */
    font-weight: normal;
    margin: 0rem 1rem 0rem 1rem !important;
    font-family: 'Open Sans', sans-serif;
  }
  
  #menu-toggle:checked~.sidebar {
    width: 60px;
  }
  
  #menu-toggle:checked~.sidebar .side-header span {
    display: none;
  }
  
  #menu-toggle:checked~.main-content {
    margin-left: 60px;
    width: calc(100% - 60px);
  }
  
  #menu-toggle:checked~.main-content header {
    left: 60px;
  }
  
  #menu-toggle:checked~.sidebar .profile,
  #menu-toggle:checked~.sidebar .side-menu a small {
    display: none;
  }
  
  #menu-toggle:checked~.sidebar .side-menu a {
    font-size: 1.3rem;
    padding: 0.7rem 0rem 0.7rem 0rem;
    /* control menu height here */
    text-align: center;
    /* control toggle menu icons align here center, left or right */
  }
  
  #menu-toggle:checked~.sidebar .side-menu a span {
    font-size: 1.3rem;
  }
  
  .main-content {
    margin-left: 165px;
    width: calc(100% - 165px);
    transition: margin-left 300ms;
  }
  
  header {
    position: fixed;
    right: 0;
    top: 0;
    left: 165px;
    z-index: 100;
    height: 60px;
    box-shadow: 0px 5px 5px -5px rgb(0 0 0 /10%);
    background-color: #2471a3;
    transition: left 300ms;
  }
  
  .header-content,
  .header-menu {
    display: flex;
    align-items: center;
  }
  
  .header-content {
    justify-content: space-between;
    padding: 1rem 1rem;
    color: #fff!important;
  }
  
  .header-content label:first-child span {
    font-size: 1.3rem;
  }
  
  .header-content label {
    cursor: pointer;
  }
  
  .header-menu {
    justify-content: flex-end;
    padding-top: .5rem;
  }
  
  .page-content {
    height: 100vh;
    padding: 1.3rem 1rem;
    background: #f1f4f9;
  }
  
  @media (min-width: 320px) and (max-width: 480px) {
    .sidebar {
      left: -165px;
      z-index: 90;
    }
    header {
      left: 0;
      width: 100%;
    }
    .main-content {
      margin-left: 0;
      width: 100%;
    }
    #menu-toggle:checked~.sidebar {
      left: 0;
    }
    #menu-toggle:checked~.sidebar {
      width: 165px;
    }
    #menu-toggle:checked~.sidebar .side-header span {
      display: inline-block;
    }
    #menu-toggle:checked~.sidebar .profile,
    #menu-toggle:checked~.sidebar .side-menu a small {
      display: block;
    }
    #menu-toggle:checked~.sidebar .side-menu a span {
      font-size: 1.7rem;
    }
    #menu-toggle:checked~.main-content header {
      left: 0px;
    }
  }
</style>


<body>
  <input type="checkbox" id="menu-toggle">
  <div class="sidebar">
    <div class="side-header">
      <h3>L<span>ogo</span></h3>
    </div>

    <div class="side-content">
      <p></p>
      <div class="side-menu">
        <ul>
          <li>
            <a href="" class="active">
              <span class="las la-home"><small>Dashboard</small></span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="las la-user-alt"><small>Profile</small></span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="las la-envelope"><small>Mailbox</small></span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="las la-clipboard-list"><small>Projects</small></span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="las la-shopping-cart"><small>Orders</small></span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="las la-tasks"><small>Tasks</small></span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="main-content">

    <header>
      <div class="header-content">
        <label for="menu-toggle">
                    <span class="las la-bars"></span>
                </label>
      </div>
    </header>


    <main>

      <div class="page-header">
        <h1>Dashboard</h1>
        <small>Home / Dashboard</small>
      </div>

      <div class="page-content">

        Page content goes here...

      </div>

    </main>

  </div>
</body>

要查看更改，请转到移动视图或调整浏览器大小，然后打开菜单并单击外部，它不会关闭。

请帮我做这件事。

可能我需要添加 JavaScript 代码

我尝试解决这个问题但失败了，我希望有人可以帮忙。

javascript
1个回答
0
投票

好吧好吧。他们做了一个小把戏，让菜单按钮成为复选框的标签。复选框规则如果它是 

:checked
则控制侧边菜单的样式。

现在所需要做的就是检测单击是否在 

.page-content
内部，如果是，则取消选中菜单按钮复选框。它在正确的屏幕宽度（移动设备）上工作。

但是，在其他显示宽度上，

:checked
状态的行为与预期效果相反。这就是为什么我首先检查
window.innerWidth
。

document.addEventListener('mousedown', function(event) {
  var elem = event.target;
  var closest = elem.closest(".page-content");

  if (window.innerWidth <= 480) {
    if (closest) {
      // hide menu
      document.getElementById("menu-toggle").checked = false
    }
  }
})
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
  <title>Admin Dashboard | Keyframe Effects</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css">
</head>
Style section

<style>
  @import url('https://fonts.googleapis.com/css2?family=Merriweather+Sans:wght@300;400;500;600&display=swap');
   :root {
    --main-color: #34425A;
    --color-dark: #34425A;
    --text-grey: #B0B0B0;
  }
  
  * {
    margin: 0;
    padding: 0;
    text-decoration: none;
    list-style-type: none;
    box-sizing: border-box;
    font-family: 'Merriweather', sans-serif;
  }
  
  #menu-toggle {
    display: none;
  }
  
  .sidebar {
    position: fixed;
    height: 100%;
    width: 165px;
    left: 0;
    bottom: 0;
    top: 0;
    z-index: 100;
    background-color: #d6eaf8;
    transition: left 300ms;
  }
  
  .side-menu ul li:hover {
    background-color: #1b4f72;
  }
  
  .side-menu a {
    color: #555;
    font-size: 1rem;
  }
  
  .side-menu a:hover {
    color: #fff;
    /* Change menu hover text color here */
  }
  
  .side-header {
    background-color: #2471a3;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .side-header h3,
  side-head span {
    color: #fff;
    font-weight: 400;
  }
  
  .side-content {
    padding: 2rem 0rem;
    height: calc(100vh - 60px);
    overflow: auto;
  }
  /* width */
  
  .side-content::-webkit-scrollbar {
    width: 5px;
  }
  /* Track */
  
  .side-content::-webkit-scrollbar-track {
    box-shadow: inset 0 0 5px grey;
    border-radius: 10px;
  }
  /* Handle */
  
  .side-content::-webkit-scrollbar-thumb {
    background: #b0b0b0;
    border-radius: 10px;
  }
  /* Handle on hover */
  
  .side-content::-webkit-scrollbar-thumb:hover {
    background: #b30000;
  }
  
  .sidebar {
    /*overflow-y: auto;*/
  }
  
  .side-menu ul {
    text-align: center;
  }
  
  .side-menu a {
    display: block;
    padding: 1rem 0rem;
    text-align: left;
  }
  
  .side-menu a.active {
    background: #1b4f72;
    border-bottom: solid 1px #d6eaf8;
  }
  
  .side-menu a.active span,
  .side-menu a.active small {
    color: #fff;
  }
  
  .side-menu a span {
    min-height: 15px;
    display: inline-flex;
    align-items: center;
    font-size: 1.7rem;
    margin: 0rem 0.5rem 0rem 0.5rem !important;
  }
  
  .side-menu a small {
    font-size: 0.95rem;
    /* Sidebar font size */
    font-weight: normal;
    margin: 0rem 1rem 0rem 1rem !important;
    font-family: 'Open Sans', sans-serif;
  }
  
  #menu-toggle:checked~.sidebar {
    width: 60px;
  }
  
  #menu-toggle:checked~.sidebar .side-header span {
    display: none;
  }
  
  #menu-toggle:checked~.main-content {
    margin-left: 60px;
    width: calc(100% - 60px);
  }
  
  #menu-toggle:checked~.main-content header {
    left: 60px;
  }
  
  #menu-toggle:checked~.sidebar .profile,
  #menu-toggle:checked~.sidebar .side-menu a small {
    display: none;
  }
  
  #menu-toggle:checked~.sidebar .side-menu a {
    font-size: 1.3rem;
    padding: 0.7rem 0rem 0.7rem 0rem;
    /* control menu height here */
    text-align: center;
    /* control toggle menu icons align here center, left or right */
  }
  
  #menu-toggle:checked~.sidebar .side-menu a span {
    font-size: 1.3rem;
  }
  
  .main-content {
    margin-left: 165px;
    width: calc(100% - 165px);
    transition: margin-left 300ms;
  }
  
  header {
    position: fixed;
    right: 0;
    top: 0;
    left: 165px;
    z-index: 100;
    height: 60px;
    box-shadow: 0px 5px 5px -5px rgb(0 0 0 /10%);
    background-color: #2471a3;
    transition: left 300ms;
  }
  
  .header-content,
  .header-menu {
    display: flex;
    align-items: center;
  }
  
  .header-content {
    justify-content: space-between;
    padding: 1rem 1rem;
    color: #fff!important;
  }
  
  .header-content label:first-child span {
    font-size: 1.3rem;
  }
  
  .header-content label {
    cursor: pointer;
  }
  
  .header-menu {
    justify-content: flex-end;
    padding-top: .5rem;
  }
  
  .page-content {
    height: 100vh;
    padding: 1.3rem 1rem;
    background: #f1f4f9;
  }
  
  @media (min-width: 320px) and (max-width: 480px) {
    .sidebar {
      left: -165px;
      z-index: 90;
    }
    header {
      left: 0;
      width: 100%;
    }
    .main-content {
      margin-left: 0;
      width: 100%;
    }
    #menu-toggle:checked~.sidebar {
      left: 0;
    }
    #menu-toggle:checked~.sidebar {
      width: 165px;
    }
    #menu-toggle:checked~.sidebar .side-header span {
      display: inline-block;
    }
    #menu-toggle:checked~.sidebar .profile,
    #menu-toggle:checked~.sidebar .side-menu a small {
      display: block;
    }
    #menu-toggle:checked~.sidebar .side-menu a span {
      font-size: 1.7rem;
    }
    #menu-toggle:checked~.main-content header {
      left: 0px;
    }
  }
</style>


<body>
  <input type="checkbox" id="menu-toggle">
  <div class="sidebar">
    <div class="side-header">
      <h3>L<span>ogo</span></h3>
    </div>

    <div class="side-content">
      <p></p>
      <div class="side-menu">
        <ul>
          <li>
            <a href="" class="active">
              <span class="las la-home"><small>Dashboard</small></span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="las la-user-alt"><small>Profile</small></span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="las la-envelope"><small>Mailbox</small></span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="las la-clipboard-list"><small>Projects</small></span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="las la-shopping-cart"><small>Orders</small></span>
            </a>
          </li>
          <li>
            <a href="">
              <span class="las la-tasks"><small>Tasks</small></span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>

  <div class="main-content">

    <header>
      <div class="header-content">
        <label for="menu-toggle">
                    <span class="las la-bars"></span>
                </label>
      </div>
    </header>


    <main>

      <div class="page-header">
        <h1>Dashboard</h1>
        <small>Home / Dashboard</small>
      </div>

      <div class="page-content">

        Page content goes here...

      </div>

    </main>

  </div>
</body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.