css 如何使菜单出现或消失，而我点击图标[关闭]

c2e8gylq 于 2023-06-07 发布在其他

关注(0)|答案(3)|浏览(170)

**已关闭。**此问题为not reproducible or was caused by typos。目前不接受答复。

此问题是由打印错误或无法再重现的问题引起的。虽然类似的问题在这里可能是on-topic，但这个问题的解决方式不太可能帮助未来的读者。
5天前关闭。
Improve this question
我声明了一个复选框，当我点击汉堡图标时，图标会成功地动画化。但我也希望菜单能出现在屏幕上。我尝试将opacity: 1设置为ilde状态，然后将opacity: 0设置为选中状态，但不起作用。
这是我的代码

.pop-wrapper {
   background-color: black;
   position: absolute;
   left: 35%;
   top: 70px;
   text-align: center;
   width: 30%;
   bottom: 1rem;
   opacity: 0;
 }

 input[type="checkbox"]:checked~.pop-wrapper.m1 {
   transform: 0.5s;
   opacity: 1;
 }

<div className="wrapper">
  <div className="hamburger-lines">
    <input class="checkbox" type="checkbox" name="" id="" />
    <div className="hamburger-l1"></div>
    <div className="hamburger-l2"></div>
    <div className="hamburger-l3"></div>
  </div>
  <div className="pop-wrapper">
    <div className="popup-m" id="popup-m">
      <div className="m1">Home</div>
      <div className="m2">Account</div>
      <div className="m3">Deposit</div>
    </div>
  </div>
</div>

我尝试将opacity: 1设置为空闲状态，将opacity: 0设置为选中状态。我期待菜单出现从0-1不透明度时，我点击汉堡图标，但它什么也不做。

css

来源：https://stackoverflow.com/questions/76204097/how-to-make-the-menu-appear-or-disappear-while-i-click-on-the-icon

3条答案

按热度按时间

dojqjjoe1#

你应该瞄准.popup-wrapper。
因此，您需要将HTML更改为：

<div className="wrapper">
    <div className="hamburger-lines">
      <input class="checkbox" type="checkbox" name="" id="" />
      <div className="hamburger-l1"></div>
      <div className="hamburger-l2"></div>
      <div className="hamburger-l3"></div>
      <div className="pop-wrapper">
        <div className="popup-m" id="popup-m">
          <div className="m1">Home</div>
          <div className="m2">Account</div>
          <div className="m3">Deposit</div>
        </div>
      </div>
    </div>
  </div>

然后将CSS更改为：

.pop-wrapper {
  background-color: grey; /* Changed to grey to see what's happening */
  position: absolute;
  left: 35%;
  top: 70px;
  text-align: center;
  width: 30%;
  bottom: 1rem;
  opacity: 0.3;
}

input[type="checkbox"]:checked~.pop-wrapper {
  transform: 0.5s;
  opacity: 1;
}

赞(0）回复(0）举报 2023-06-07

zd287kbt2#

~选择器是subsequent-sibling组合子，意味着它将只选择后续的兄弟。
因此，首先将<input class="checkbox" type="checkbox" name="" id="" />移动到.pop-wrapper之前，同时将input:checked~.pop-wrapper.m1更改为input:checked~.pop-wrapper

.pop-wrapper {
   /* background-color: black; */
   position: absolute;
   left: 35%;
   top: 70px;
   text-align: center;
   width: 30%;
   bottom: 1rem;
   opacity: 0;
 }

 input:checked~.pop-wrapper {
   transform: 0.5s;
   opacity: 1;
 }

<div class="wrapper">
  <div class="hamburger-lines">
    <div class="hamburger-l1"></div>
    <div class="hamburger-l2"></div>
    <div class="hamburger-l3"></div>
  </div>
  <input class="checkbox" type="checkbox" name="" id="" />
  <div class="pop-wrapper">
    <div class="popup-m" id="popup-m">
      <div class="m1">Home</div>
      <div class="m2">Account</div>
      <div class="m3">Deposit</div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-06-07

pxyaymoc3#

不使用opacity隐藏和显示div，可以使用

display：none;* 和 * 显示：块;* 属性和javascript函数组织的显示和隐藏的菜单，你想显示，而不是

<input class="checkbox" type="checkbox" name="" id="" />

你可以创造

<button class="checkbox" type="checkbox" onclick="clicked()">Hamburger Menue</button>

但按钮的位置将是你想要显示的潜水，这是JavaScript函数来更改CSS属性

function clicked() {
    var n = document.getElementById("hamburgerMenue");
    if (n.style.display == "none") {
        n.style.display = "block";
    } else {
        n.style.display = "none"
    }
}

最后的结果是

function clicked() {
        var n = document.getElementById("hamburgerMenue");
        if (n.style.display == "none") {
            n.style.display = "block";
        } else {
            n.style.display = "none"
        }
    }

.pop-wrapper {
   background-color: black;
   position: absolute;
   left: 35%;
   top: 70px;
   text-align: center;
   width: 30%;
   bottom: 1rem;
   /* opacity: 0.3; */
   display: none;
 }

 #hamburgerMenue {
    display: none;
 }

<div className="wrapper">
    <button class="checkbox" type="button" onclick="clicked()">Hamburger Menue</button>
  <div className="hamburger-lines" id="hamburgerMenue" >
    <div className="hamburger-l1">This is me humburger1</div>
    <div className="hamburger-l2">This is me humburger2</div>
    <div className="hamburger-l3">This is me humburger3</div>
  </div>
  <div className="pop-wrapper">
    <div className="popup-m" id="popup-m">
      <div className="m1">Home</div>
      <div className="m2">Account</div>
      <div className="m3">Deposit</div>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-06-07

我来回答

css 如何使菜单出现或消失，而我点击图标[关闭]

3条答案

相关问题

热门标签

最新问答