按钮 X 用于在单击并打开时关闭下拉切换菜单

Question

我设法创建了一个响应式菜单，在一定的分辨率下会变成带有汉堡包图标的切换菜单，问题是带有汉堡包图标的切换菜单在 1205 px 之后出现，这很好，但是一旦我点击汉堡包，它就会出现在下拉菜单中打开，无法关闭它！我想添加一个 X 按钮以便能够在打开后将其关闭，有人知道我该怎么做吗？

html

 <nav class="nav-box">
  <label class="label" for="toggle">
      &#9776;
  </label>
  <input type="checkbox" id="toggle">
    <ul class="f-cb">
        <!-- my menu content -->
    </ul>
 </nav>

CSS

.label {
    margin: 0 40px 0 0;
    font-size: 26px;
    line-height: 22px;
    display: none;
    color: #433F3F;
    float: right;
    width: 180px;
}

#toggle {
    display: none;
}
/* menu */

@media only screen and (max-width: 1205px) {

    #form1 > div:nth-child(3) > header > nav.nav-box > ul{
    position: absolute;
    background-color: white;
    min-width: 150px;
    box-shadow: 5px 16px 16px 8px rgba(0,0,0,0.4);
    z-index: 1;
    }

    .label {
        display: block;
        cursor: pointer;
        margin: 0 40px 0 0;
        font-size: 28px;
        line-height: 70px;
        color: grey;
        float: right;
        width: 26px;
        float: right;
    }

    #toggle:checked + .f-cb {
        display: block !important;
    }
}

@media only screen and (max-width: 760px) {

    .label {
        margin: 0 40px 0 0;
        font-size: 28px;
        line-height: 70px;
        color: grey;
        float: right;
        width: 26px;
        float: right;
    }
}

我尝试做一个当我单击汉堡包图标时出现在下拉菜单中的按钮 X，但我不知道该怎么做

Answer 1

我认为你最初的做法是错误的。只需添加一些 JavaScript，您就可以轻松地重现此功能。

1. HTML：

<div id="header" class="border">
  <nav id="nav_container">
    <button id="menu_btn" class="cursor_pointer" type="button">
      &#9776;
    </button>
    <ul id="menu_list_container" class="border">
      <li id="close_btn_container">
        <button id="close_menu_btn" class="cursor_pointer" type="button">
&#10006;
        </button>
      </li>
      <li>Point I</li>
      <li>Point II</li>
      <li>Point III</li>
    </ul>
  </nav>
</div> 

2. CSS：

* {
  box-sizing: border-box
}

#header {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  padding: 10px;
  max-height: 60px
}

#nav_container {
  display: none;
  flex-direction: column;
  align-items: flex-end;
  @media only screen and (max-width: 760px) {
      display: flex;
  }
}

#menu_btn {
  width: 40px;
  min-height: 40px;
}

#menu_list_container {
  list-style: none;
  padding: 10px;
  display: flex;
  flex-direction: column;
  row-gap: 10px;
  display: none;
}

#close_btn_container {
  width: 100%;
  display: flex;
  justify-content: flex-end
}

.border {
    border: 1px black solid;
}

.cursor_pointer {
    cursor: pointer
}

3. JS：

const menuButton = document.getElementById("menu_btn")
const closeMenuButton = document.getElementById("close_menu_btn")
const menuListContainer = document.getElementById("menu_list_container")

menuButton.addEventListener("click", () => {
  menuListContainer.style.display = "flex"
})

closeMenuButton.addEventListener("click", () => {
  menuListContainer.style.display = "none"
})

4. CodePen链接： https://codepen.io/takhirkudusov/pen/dywZrrx