主页 / 问题 / 1067876
Accepted
Рома
Asked:2020-01-10 02:24:45 +0800 CST2020-01-10 02:24:45 +0800 CST

如何关闭菜单？

  • 772

我们有这个带有一个菜单和两个按钮的 html 代码（第一个是菜单图标，第二个是十字图标）

<i class="fas fa-align-right" id="navToggle"></i>
<i class="fas fa-times" id="navClose"></i>
<div class="nav-open">
    ....
</div>

每个都有自己的样式，以及激活或打开时的样式

.nav-open {    
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 35vh;
  background: #E5E5E5;
  box-shadow: 0 0 20px #0A36B5;
  z-index: 5;
  display: flex;
  align-items: center;
  transition: all .55s ease-in-out;
  opacity: 0;
      -webkit-transform-origin: top right;
              transform-origin: top right;
      -webkit-transform: scale(0);
              transform: scale(0);
      visibility: hidden;
}
.nav-open.open {
  opacity: 1;
  visibility: visible;
  -webkit-transform: scale(1);
      transform: scale(1);
}
.fas.fa-align-right.active {
  visibility: hidden;
  opacity: 0;
}
.fas.fa-times {
  visibility: hidden;
  opacity: 0;
  z-index: 7;
  display: none;
}
.fas.fa-times.active {
  visibility: visible;
  opacity: 1;
  color: #111;
  z-index: 7;
  display: initial;
}

使用这个 jQuery 代码，我添加了活动类

$("#navToggle").click(function() {
    $(this).toggleClass("active");
    $("#navClose").toggleClass("active")
    $(".nav-open").toggleClass("open");
});
jquery

1 个回答

  1. Best Answer

    要关闭菜单：

    1) 使用户可以看到十字架。为此，您需要添加到您的 .fas.fa-times.active 类

    position: relative;
z-index: 50;

    2）为十字架添加一个处理程序：

    $("#navClose").click(function() {
  $(this).toggleClass("active");
  $("#navToggle").toggleClass("active")
  $(".nav-open").toggleClass("open");
});

    但是为了优化代码，我会做一些不同的事情：1）将选择器从这样的 .fas.fa-times 替换为 .close-btn，例如 2）当按钮本身具有活动类时添加#navToggle （以便用户可以看到）

    position: relative;
z-index: 50;

    3）单击#navToggle 按钮（在下一次单击-返回）时，我会将类 fa-align-right 更改为 fa-times。仅使用 1 个按钮。4) 1 个按钮仅使用 1 个处理程序：

    $("#navToggle").click(function() {
  $(this).toggleClass("active");
  $(".nav-open").toggleClass("open");
});
    • 2

相关问题